jquery - 获取多个（多个）选择框的选定值

Question

看看这段代码，我写的：http ://pastebin.com/TZpUAWpA和这个 jQuery，基本上是从 jquery 文档复制粘贴的：http: //pastebin.com/Ecu0T5Kv

问题是，我想这样做，每个都<p class="java"></p>显示前一个选择框的选定值。

目前，它仅适用于底部的标签，底部选定的值适用于所有<p>标签。

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

Answer 2

你的代码：

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

有几个问题：

• $(".inputArea").each(function(i){说用“inputArea”类处理每个元素，但只有一个，你的容器 div。
• $("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 结构中，段落元素不会立即跟随 select 元素，所以这就是我同时使用.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 结构。