Question

我有2个seletboxes

<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="">

现在，我想要实现的是：

现在当我从第一个选择框中选择一个选项时，例如我选择“学生”，文本“学生”被复制到INPUT值，然后例如我从第二个选择框中选择一个选项，让我们说2001，现在这也必须添加到INPUT值。

我已经做了这个，但是它运行不正常，我制作的代码将select选项值添加到输入中，但它删除了添加到输入中的其他选项的其他值..

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”，而输入只包含一个选中的值“学生”或“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());
});

或

使用this参考

  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 ...简单易读..

Answer 2

您可以尝试以下。

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

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

在此代码中，它将阻止将field2的多个值添加到输入中。

这是filddle ...... example

Answer 3

试试这个：

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

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

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

3 个答案: