jQuery 多重选择器语法

Question

伙计们，这个语法正确吗？我正在尝试创建一个 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());
});

Answer 1

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

$('#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>

让我知道它是否适合你！

Answer 2

你的做法可能是正确的。您正在使用 jQuery.each() method. If you are targeting jQuery objects, I'd go with the .each() method. I've written a 3rd method to properly place the values into the correct array. When in doubt, please reference the 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>

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

jQuery 多重选择器语法

jQuery multiple selectors syntax

syntax

jquery

jquery-selectors