1

我有 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 name="title" type="text" id="title" value="">

现在，我想要实现的是：

现在，当我从第一个选择框中选择一个选项时，例如我选择“学生”，文本“学生”被复制到 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());
});

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

想知道，有什么办法可以让这段代码更少更干净......？

4

3 回答 3

3

试试这个

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

于 2013-09-24T10:50:19.937 回答
1

您可以尝试以下。

  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 的多个值添加到输入中。

这是小提琴...示例

于 2013-09-24T10:56:31.197 回答
0

试试这个：

 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());
 });
于 2013-09-24T10:56:21.903 回答