获取多重的设定值（不止一个）选择框

Question

看看这个代码，我写的：http://pastebin.com/TZpUAWpA，而这jQuery的，什么是基本复制自jQuery的文档粘贴：http://pastebin.com/Ecu0T5Kv

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

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

Answer 1

这并不工作，希望它的你正在寻找：

FIDDLE

$(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结构中，段落元素不会立即跟随se​​lect元素，所以这就是我使用.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结构。