将多选选项中的值添加到输入值答案

【问题标题】：Adding value from multiple select option to input value将多选选项中的值添加到输入值
【发布时间】：2013-09-24 10:48:15
【问题描述】：

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

现在，我想要实现的是：

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

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

想知道，有没有什么办法可以让这段代码更简洁更简洁...？

【问题讨论】：

标签： javascript jquery joomla mootools joomla2.5

【解决方案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 选择器...简单易读..

【讨论】：

我已经像这样添加了你的代码，它似乎工作了谢谢:)
能否请您查看我的更新并告诉我您的想法？谢谢
如果用户从第二个然后从第一个选择...输入中的值应该是什么？？

【解决方案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 的多个值添加到输入中。

问题来了...example

【讨论】：

【解决方案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());
 });

【讨论】：