Question

我有两个选择框，如下例所示：

    <select name="head" id="head">
    <option value="0">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    </select>

和数组选择框：

    <select name="body[]">
    <option value="0">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
    </select>

如何使用javascript函数在第一个选择框（name =“head”）的基础上更改数组选择框（name =“body []”）中的选定值？

如果我在任何数组选择框（name =“body []”）中选择不同的值，第一个选择框（name =“head”）中的选定值是否已更改为<option value="0">Choose</option>？

Answer 1

在第一个选择上绑定change事件，然后在回调函数上通过添加新选项修改另一个选择。

示例：

http://jsfiddle.net/orlando/SJEGX/

Answer 2

试试这个简单的脚本：

 <script>
    $(function(){
        $('#head').on({
            change: function(){ $('select[name^="body"]').val(this.value)}
        });
        $('select[name^="body"]').on({
            change: function(){$('#head').val(0)}
        });
    })
 </script>

Answer 3

试试这个

    <select name="head" id="head" onchange="$('#body').val(this.value);">
    <option value="0">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>
<select name="body[]" id="body" onchange="$('#head').val(0);">
    <option value="0">Choose</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

Answer 4

问题不是只改变选择的值，而是要真正选择一个选项

（将id添加到正文）

<select name="head" id="head">
  <option value="0">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>
<br>
<br>
<select name="body[]" id="body">
  <option value="0">Choose</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

JS

$("#head").change(function(){
  $("#body option[value='"+$(this).val()+"']").prop('selected',true); 
});

$("#body").change(function(){
  $("#head option[value='0']").prop('selected',true);
});

http://jsfiddle.net/WZMCA/

根据另一个选择框更改值选择框

4 个答案: