0

この例のような 2 つの選択ボックスがあります。

    <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

これを試して

    <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

最初の選択でイベントをバインドchangeし、コールバック関数で新しいオプションを追加して他の選択を変更します。

例：

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

于 2013-06-13T07:33:51.337 に答える
0

問題は、選択の値だけを変更することではなく、実際にオプションを選択することです

(ボディに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 に答える
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 に答える