1

私が書いたこのコードを見てください: http://pastebin.com/TZpUAWpA、およびこの jQuery は、基本的に jquery ドキュメントからコピーペーストされたものです: http://pastebin.com/Ecu0T5Kv

<p class="java"></p>問題は、すべてが前の選択ボックスの選択された値を表示するようにしたいということです。

現時点では、一番下のタグにのみ機能し、一番下の選択値はすべての<p>タグに適用されます。

4

2 に答える 2

1

これはうまくいきます。あなたが探しているものであることを願っています:

フィドル

$(document).ready(function(){
     $('.parent').each(function(){
            var theVal = $(this).find('select option:selected').html();
            $(this).find('p').html(theVal);
        });
    $('.single').change(function(){
        $('.parent').each(function(){
            var theVal = $(this).find('select option:selected').html();
            $(this).find('p').html(theVal);
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="inputArea">
    <div class="parent">
    <select class="single"><option selected value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option selected value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
   </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option selected value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option selected value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option  value="saistitajvards">Saistītājvārds</option>
    </select>
    <input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    <div class="parent">
    <select class="single"><option  value="uzbuve">Uzbūve</option>
        <option  value="paligteikuma-veids">Palīgteikuma Veids</option>
        <option  value="gramatiskais-centrs">Gramatiskais Centrs</option>
        <option  value="saistitajvarda-kategorija">Saistītājvārda kategorija</option>
        <option selected value="saistitajvards">Saistītājvārds</option>
    </select><input class="inpt" id="" type="text" name="">
    <p class="java">saistitajvards</p>
    </div>
    
</div>

于 2012-04-05T09:13:35.287 に答える
0

あなたのコード:

    $(".inputArea").each(function(i){
        var singleValues = $("option:selected").val();
        $("p").html(singleValues);
    });

いくつかの問題があります:

  • $(".inputArea").each(function(i){各要素をクラス「inputArea」で処理するように指示されていますが、コンテナ div は 1 つだけです。
  • $("option:selected")選択されているすべてのオプション要素に一致しますが、
  • var singleValues = $("option:selected").val();選択された最初のオプションの値を取得します。
  • $("p").html(singleValues);すべての段落要素のコンテンツを設定します。

代わりに次のようなことを試すことができます。

$("select.single").each(function(i){
     var $this = $(this);
     $this.nextUntil("p").next().html($this.val());
});

デモ: http://jsfiddle.net/mYNXF/

これは、クラス「シングル」のすべての選択要素を処理することを意味します。それぞれについて、次の段落要素を見つけて、その値を設定します。この.next()メソッドは、直後の要素を選択するか、何も選択しないことに注意してください。一致するものを探し続けるわけではなく.nextUntil()、セレクターに一致する最初の要素までは検索しますが、その要素は含まれません。あなたのhtml構造では、段落要素は選択要素の直後に続くわけではないため、 と の両方を使用しているのはそのため.nextUntil("p")です.next()。

または、次のようなこともできます。

var $inputArea = $(".inputArea"),
    $selects = $inputArea.find("select.single"),
    $ps = $inputArea.find("p.java");

function displayVals() {
    for (var i = 0; i < $selects.length; i++) {
        $ps.eq(i).html($selects.eq(i).val());
    }
}

デモ: http://jsfiddle.net/mYNXF/2/

どちらの方法でも、現在の html 構造で動作します。

于 2012-04-05T09:30:50.463 に答える