jQuery 多选择器语法答案

【问题标题】：jQuery multiple selectors syntaxjQuery 多选择器语法
【发布时间】：2017-10-03 02:32:59
【问题描述】：

各位，这个语法正确吗？我正在尝试创建一个dropdown select 并获取值，但我不确定多个选择器的这种语法是否正确

var countries = [];
var locations = [];
var zips = [];
$.each($(".country option:selected, .location option:selected ,.zip option:selected"), function(){            
  countries.push($(this).val());
  locations.push($(this).val());
  zips.push($(this).val());
});

【问题讨论】：

你能解释清楚吗？如果 3 个下拉列表中的任何一个发生更改，您想将值保存在数组中。对吗？或者如果这三个中的任何一个发生变化，您想获得所有 3 个值？
这种语法和方法是正确的，可以将所有三个值放在一起......
如果 3 个下拉列表中的任何一个发生更改，我想将值保存在数组中
请看我修改后的代码！

标签： jquery syntax jquery-selectors

【解决方案1】：

你的做法可能是正确的。您正在使用jQuery.each() 方法。如果您的目标是jQuery 对象，我会使用.each() 方法。我已经编写了第三种方法来正确地将值放入正确的数组中。如有疑问，请参考jQuery API。它包含大量信息和有用的示例。

/* Method 1 - jQuery.each( object, callback ) */
var countries = [];
var locations = [];
var zips      = [];
$.each($('.country option:selected, .location option:selected, .zip option:selected'), function(index, value) {
    countries.push($(this).val());
    locations.push($(this).val());
    zips.push($(this).val());
});
console.log('Method 1 - countries', countries);
console.log('Method 1 - locations', locations);
console.log('Method 1 - zips', zips);

/* Method 2 - .each( function ) */
var countries = [];
var locations = [];
var zips      = [];
$('.country option:selected, .location option:selected, .zip option:selected').each(function() {
    countries.push($(this).val());
    locations.push($(this).val());
    zips.push($(this).val());
});
console.log('Method 2 - countries', countries);
console.log('Method 2 - locations', locations);
console.log('Method 2 - zips', zips);

/* Suggested Method */
var countries = [];
var locations = [];
var zips      = [];
$('.country option:selected, .location option:selected, .zip option:selected').each(function() {
    if($(this).parents('.country').length) countries.push($(this).val());
    if($(this).parents('.location').length) locations.push($(this).val());
    if($(this).parents('.zip').length) zips.push($(this).val());
});
console.log('Suggested Method - countries', countries);
console.log('Suggested Method - locations', locations);
console.log('Suggested Method - zips', zips);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="country">
    <option>USA</option>
</select>
<select class="location">
    <option>Florida</option>
</select>
<select class="zip">
    <option>32935</option>
</select>

【讨论】：

非常感谢！这些方法也很有用
jQuery 选择器为您构建一个对象。随意在您的控制台中查看它，看看什么是操作它的最佳方式。（即console.log($('.selector'));）

【解决方案2】：

是的，你可以像下面的语法一样使用多重选择器。

$('#lbl1,#lbl2,#lbl3').css('border','1px solid red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
 <label id="lbl1">Label 1 </label> <br/>
 <label id="lbl2">Label 2 </label> <br/>
 <label id="lbl3">Label 3 </label>
 
</div>

让我知道它是否适合你！

【讨论】：

答案很有用，但我想知道 $('#example option:selected, #examples option:selected') 是否有效

【解决方案3】：

这将在控制台中打印输出。

$('#btn').click(function(){
  console.log('hi');
  //console.log($('.country option:selected, .location option:selected').val());
  
  $('.country option:selected, .location option:selected').each(function(){
    console.log($(this).val());
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="country">
   <option>A</option>
   <option>B</option>
   <option>C</option>
   <option>D</option>
  </select>
  
   <select class="location">
   <option>loc1</option>
   <option>loc2</option>
   <option>loc3</option>
   <option>loc4</option>
  </select>
  
    <input type="button" id="btn" value="get"/>

【讨论】：