javascript - 将多个选择选项的值添加到输入值

Question

我有2个选择框

<select id="field1" class="inputtextbox  required" size="0">
<option value="Student">Student</option>
<option value="Teacher">Teacher</option>
<option value="Director">Director</option>
</select>

<select id="field2" class="inputtextbox  required" size="0">
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
</select>

我有一个空的 INPUT 字段

<input name="title" type="text" id="title" value="">

现在，我要实现的目标是:

现在当我从第一个选择框中选择一个选项时，例如我选择“Student”，文本“Student”被复制到 INPUT 值，然后例如我从第二个选择框中选择一个选项，比方说2001，现在也必须将其添加到 INPUT 值中..

我已经做了这个，但它工作不正常，我所做的代码将选择选项值添加到输入中，但它从添加到输入中的其他选择选项中删除了其他值..

jQuery('#field1').on('change', function () {
      jQuery("input[name='title']").val(jQuery( "#field1" ).val());
});

所以这段代码有效，但它只适用于一个选择选项，例如如果代码是这样的:

jQuery('#field1').on('change', function () {
      jQuery("input[name='title']").val(jQuery( "#field1" ).val());
});
jQuery('#field2').on('change', function () {
      jQuery("input[name='title']").val(jQuery( "#field2" ).val());
});

现在例如我从“field1”选择框中选择“Student”，从“field2”选择框中选择“2001”，输入的值必须是“Student 2001”，而不是输入仅包含所选中的一个值“Student”或“2001”.. 取决于最后选择的...

有人可以帮助我实现输入值具有所有 2 个选定选项吗？

谢谢

更新

在“bipen”的帮助下，代码现在像这样工作:

jQuery('#field1').on('change', function () {
jQuery("input[name='title']").val(jQuery( "#field1" ).val() + ' ' + jQuery( "#field2" ).val());
});

jQuery('#field2').on('change', function () {
jQuery("input[name='title']").val(jQuery( "#field1" ).val() + ' ' + jQuery( "#field2" ).val());
});

我必须将值放入两个代码中，因为用户可以从第二个选择框中选择一个值，而不必从第一个选择框中选择一个值..

想知道，有没有什么办法可以让这段代码变得更少、更干净……？

Answer 1

试试这个

jQuery('#field1').on('change', function () {

  jQuery("#title").val(jQuery("#field1").val());
});

jQuery('#field2').on('change', function () {
  var val=jQuery("#title").val();
  jQuery("#title").val(val + ' ' +jQuery( "#field2" ).val());
});

或

使用这个引用

  jQuery('#field1').on('change', function () {

  jQuery("#title").val(jQuery(this).val());
});

jQuery('#field2').on('change', function () {
  var val=jQuery("#title").val();
  jQuery("#title").val(val + ' ' +jQuery(this).val());
});

因为你有输入的 id 使用 id 选择器...简单易读..