4

HTMLをよく知っているので、JQueryを学ぼうとしています。JQuery サイトで.change 関数を見つけました。まさに私がやりたいことです。

理想的には、test1 と test2 は相互にのみ影響し、test3 と test4 は相互にのみ影響するようにしたいと考えています。

現在、test2 と test4 は test1 と test3 の両方に影響します

これが私のコードです：

<select id="test1" name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>

<div id="test2"></div>

 <script>
    $("select#test1").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
     });
      $("div#test2").text(str);
     })
   .change();
</script>


<select id="test3" name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>

<div id="test4"></div>

<script>
    $("select#test3").change(function () {
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
     });
      $("div#test4").text(str);
     })
   .change();
</script>

IDで区切ってみましたが、まだまとまりません。これを正しく機能させるにはどうすればよいですか？

4

4 に答える 4

2

この行：

 $("select option:selected").each(function () {

次のように記述します。

$("#test1 option:selected").each(function() {

その行で一般的な「選択」を使用することにより、ページ上のすべての「選択」要素を選択し、代わりにその ID を使用して、目的の選択タグのみをターゲットにします。

于 2013-05-24T06:43:29.400 に答える
0 
$("select#test1").change(function () {
  var str=$("#test1 :selected").text();
  $("div#test2").text(str);
});

js fiddle http://jsfiddle.net/xdJ3H/

于 2013-05-24T06:56:15.530 に答える
0

これは、ページで選択したすべてのオプションを選択しているためです。$("select option:selected").each(..)使用する代わりに$(this).find("select option:selected").each(..)。この方法では、test2-div で変更された選択の選択されたオプションのみが表示され、他の選択のオプションは表示されません。

于 2013-05-24T06:44:45.227 に答える
0

実際に必要なのは、選択ボックスをその兄弟の div タグに関連付ける汎用コントロールのようです。そのためには、少し違うものが必要です。

http://jsfiddle.net/b9chris/KpUWP/

(function() {
    function update() {
        var str = $.map($('option:selected', this), function(option) {
            return $(option).text();
        }).join(' ');

        $(this).next().text(str);
    };

    $("select").change(update)
    .each(update);
})();

そのため、update 関数を直接 change() ハンドラに割り当ててから change() イベントを発生させるのではなく、最初に update 関数を個別に定義します。そうすることはかなり良いハックですが、何かが変更イベントをリッスンする必要がある場合、奇妙な問題が発生します。

次に、文字列を割り当てたい div を取得するには、それが常に次の兄弟であることを知っているので、単に.next().

作成していたスペースで区切られた文字列を作成するには、各ループの代わりに、選択したリスト (この場合は選択したオプション タグ) の各要素を単純に取得し、それらのテキスト値を返す map 関数を使用できます。結果は、必要なものの単純な配列であり、JS 組み込みの .join() メソッドがそこから最終的な文字列を構築します。

update 関数の this オブジェクトが select タグであることは既にお気づきのようです。$('option:selected', this)ID に頼って特定のハンドラーで参照されている select を元に戻そうとするのではなく、そのタグのオプションだけを取得するための呼び出しのような検索のコンテキストとしてこれを使用できます。

于 2013-05-24T08:37:28.890 に答える