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

你做的方式可能是正确的。您正在使用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>

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

让我知道它是否适合你！

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

jQuery多选择器语法

3 个答案: