0

我有两个像这个例子一样的选择框：

    <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>？

4

4 回答 4

0

试试这个简单的脚本：

 <script>
    $(function(){
        $('#head').on({
            change: function(){ $('select[name^="body"]').val(this.value)}
        });
        $('select[name^="body"]').on({
            change: function(){$('#head').val(0)}
        });
    })
 </script>
于 2013-06-13T07:40:52.083 回答
0

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

例子：

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

于 2013-06-13T07:33:51.337 回答
0

尝试这个

    <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>
于 2013-06-13T07:42:50.933 回答
0

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

（将 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/

于 2013-06-13T07:46:17.200 回答