jQuery multiple selectors syntax

Question

Guys is this syntax correct? I'm trying to make a dropdown select and get the value but I'm not sure if this syntax of multiple selectors are correct

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

can you explain it clearly? you want to save the value in the array if any of the 3 dropdowns is change..Is that correct? or if any of the three is change you want to get all the 3 values? — Shadow Fiend
– Shadow Fiend, Commented Oct 3, 2017 at 2:40
This syntax and approach is correct to get all three values together....... — Kamal
– Kamal, Commented Oct 3, 2017 at 2:53
I want to save the value in the array if any of the 3 dropdowns is change — LMAOman
– LMAOman, Commented Oct 3, 2017 at 2:57

Daerik · Accepted Answer · 2017-10-03 02:52:09Z

1

The way you are doing can be correct. You are using the 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. It's packed full of information and useful examples.

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

answered Oct 3, 2017 at 2:52

Daerik

4,2933 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LMAOman Over a year ago

Thanks a lot! The methods are useful too

Daerik Over a year ago

The jQuery selector builds an object for you. Feel free to view it in your console to see what is the best way to manipulate it. (i.e. console.log($('.selector'));)

Kamal · Accepted Answer · 2017-10-03 02:41:28Z

0

Yes you can use multiselector like following syntax.

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

Let me know if it works for you!

answered Oct 3, 2017 at 2:41

Kamal

2,5351 gold badge12 silver badges14 bronze badges

1 Comment

LMAOman Over a year ago

The answer is useful but I want to know if $('#example option:selected, #examples option:selected') is valid

Kamal · Accepted Answer · 2017-10-03 02:57:01Z

0

This will print the output in console.

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

answered Oct 3, 2017 at 2:57

Kamal

2,5351 gold badge12 silver badges14 bronze badges

Collectives™ on Stack Overflow

jQuery multiple selectors syntax

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related