6

選択したオプションを jQuery を使用してプログラムで更新していますが、ブラウザーでは何も変わりません。(つまり、新しく選択したオプションに切り替えるのではなく、以前に選択したオプションが選択されたままになります。)

ありがとう。--ジェフ

次のような単純なフォームがあります。

<form id="form1" name="form1" method="" action="">
<p>Assign: 
<select name="assigner" id="assigner">
<option value="Sam" selected="selected">Sam</option>
  <option value="Harry">Harry</option>
  <option value="Fred">Fred</option>
</select>
<input type="button" name="button1" id="button1" value="Submit" />
</p>
<p>    Task A: <select name="assignment[]" id="assigner">
  <option value="Sam">Sam</option>
  <option value="Harry" selected="selected">Harry</option>
  <option value="Fred">Fred</option>
</select>
</p>
<p>    
Task B: <select name="assignment[]" id="assigner">
  <option value="Sam">Sam</option>
  <option value="Harry"  selected="selected">Harry</option>
  <option value="Fred">Fred</option>
</select>
</p>
</form></div>

私のjQueryコードは次のようになります。

<script type="text/javascript">
jQuery(document).ready(function(){ 
$('[name="button1"]').click(
    function(){
        var form = $(this).parents('form');
        var assigned = form.find(':selected').first().val();
        form.find(':selected').each(function(index){
            $(this).val( assigned ).change();
        });
    }
 );
});
</script>
4

2 に答える 2

4

jQueryを使用して、選択したオプションをプログラムで更新しています

私が見る限りではありません。selected の値を再設定していますが、実際のボックスoptionに伝えることができる限り何もしていません。select

ボックスを変更するには、その要素の 1 つではなく、ボックスを識別してselect呼び出す必要があります。valoption

あなたが何をしたいかはわかりませんが、ボックスinput[name="button1"]を更新する例を次に示します。ソースselect

HTML:

<select id="theSelect">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>
<input type="button" id="theButton" value="Click me">

JavaScript:

jQuery(function($) {

  $("#theButton").click(function() {
    $("#theSelect").val("2");
  });

});

これとは別に、コメントで j08691 が指摘したように、同じid値 ( "assigner") を複数の要素に割り当てることはできません。id値はドキュメント内で一意である必要があります。あなたのコードはそれを使用していることを示していないidため、これは無関係かもしれませんが、フラグを立てる価値があります。

于 2012-06-06T20:38:37.700 に答える
1 
<form id="form1" name="form1" method="" action="">
    <p>Assign: 
        <select name="assigner" id="assigner">
            <option value="Sam" selected="selected">Sam</option>
            <option value="Harry">Harry</option>
            <option value="Fred">Fred</option>
        </select>
        <input type="button" name="button1" id="button1" value="Submit" />
    </p>
    <p>
        Task A: <select name="assignment[]" id="assigner2">
            <option value="Sam">Sam</option>
            <option value="Harry" selected="selected">Harry</option>
            <option value="Fred">Fred</option>
        </select>
    </p>
    <p>    
        Task B: <select name="assignment[]" id="assigner3">
            <option value="Sam">Sam</option>
            <option value="Harry"  selected="selected">Harry</option>
            <option value="Fred">Fred</option>
        </select>
    </p>
</form>



<script type="text/javascript">
jQuery(document).ready(function(){ 
$('[name="button1"]').click(
    function(){
        var assigned = $("#assigner").val();
        $('#form1 select').val( assigned );
    }
 );
});
</script>
于 2012-06-06T20:45:28.653 に答える