Question

看看这段代码，我写的是：http://pastebin.com/TZpUAWpA，这个jQuery，基本上是从jquery docs复制粘贴的：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() method选择紧随其后的元素或不执行任何操作，它不会继续搜索以查找匹配项，而.nextUntil()搜索但不包括与选择器匹配的第一个元素。在你的html结构中，paragraph元素不会紧跟在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结构。

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

2 个答案: