代码之家 › 专栏 › 技术社区 › LMAOman

jQuery多选择器语法

jquery-selectors syntax jquery

LMAOman · 技术社区 · 9 年前

伙计们,这个语法正确吗?我在试着做一个 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 回复 | 直到 9 年前

Daerik 9 年前

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

Kamal 9 年前

是的,您可以使用类似以下语法的多选择器。

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

Kamal 9 年前

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

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