Jquery find ID's that match array

Question

Ok I'm using a map.get() to stored select option values in Array

myArray = $("option:selected").map(function(){ return this.value }).get().join(" ");

I have some div's with ID names same as the select options value stored in Array

myArray = [ one two three ];

I want to apply [one two three] as class to a div.box and find the Div's with ID names same as myArray [div#one div#two div#three] and get all input:checked.

 <div id="one">   inputs with :checked </div>
 <div id="two">   inputs with :checked </div>
 <div id="three"> inputs with :checked </div>
 <div id="four">  inputs with :checked </div>

How to get :checked items from Div's with ID [ one two three ] only.

I'm not sure how to find the ID's that match each array element appreciate your help and thanks in advance :)

var selectedOptions = $(".select-field option:selected").map(function() {
  return this.value
}).get().join(" ");


//add selected option value as CLASS to .box
$('.box').addClass(selectedOptions);


// check if selected option stored in array match any div ID and get it's checked values

$.each(selectedOptions, function(index, value) {
  $('#' + value + ' input:checked').each(function() {
    var checked = $(this);
  });
});


//result

$("p.select").append(selectedOptions);
$("p.checked").append(checked);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="select-field">
  <option value="one">option one</option>
  <option value="two">option two</option>
  <option value="three">option three</option>
</select>

<select class="select-field">
  <option value="four">option four</option>
  <option value="five">option five</option>
  <option value="six">option six</option>
</select>


<div id="one">
  <p>Option one</p>
  <fieldset>
    <input type="radio" name="div1" value="left">
    <label for="left">Left</label>
    <input type="radio" name="div1" value="right" checked>
    <label for="right">Right</label>
  </fieldset>
</div>

<div id="two">
  <p>Option two</p>
  <fieldset>
    <input type="radio" name="div2" value="left" checked>
    <label for="left">Left</label>
    <input type="radio" name="div2" value="center">
    <label for="center">Center</label>
  </fieldset>
</div>

<div id="three">
  <p>Option three</p>
  <fieldset>
    <input type="radio" name="div3" value="right">
    <label for="right">Right</label>
    <input type="radio" name="div3" value="center" checked>
    <label for="center">Center</label>
  </fieldset>
</div>

<div id="four">
  <p>Option four</p>
  <fieldset>
    <input type="radio" name="div4" value="right">
    <label for="right">Right</label>
    <input type="radio" name="div4" value="center" checked>
    <label for="center">Center</label>
  </fieldset>
</div>

<div id="five">
  <p>Option five</p>
  <fieldset>
    <input type="radio" name="div5" value="left">
    <label for="left">Left</label>
    <input type="radio" name="div5" value="center" checked>
    <label for="center">Center</label>
  </fieldset>
</div>

<br />

<h4>Results</h4>
<div style="border:2px solid" class="box">Add "option one" and "option two" value as Class to this div .box example class="one four"</div>

<p class="select">Selected Options are :</p>

<p class="checked">Checked Options are :</p>

Some input: Please declare vars with var, delimit array members with comma, if they are strings, use quotes, if you check for :checked, there should be some input fields that can be checked. — Kai Mattern
– Kai Mattern, Commented Dec 13, 2015 at 8:05

Punit Vajpeyi · Accepted Answer · 2015-12-13 08:07:24Z

1

you have to traverse array using each and then you have to find checked values.

 $.each(myArray, function( index, value ) {
     $('#'+value+' input:checked').each(function() {
         console.log($(this));
     });
 });

This example might help you.

answered Dec 13, 2015 at 8:07

Punit Vajpeyi

2061 silver badge11 bronze badges

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

2 Comments

Vinay Kashyap Over a year ago

Hi do you think i need to phrase this or something? thanks for your response when i try this in console I see Error : Uncaught TypeError: Cannot use 'in' operator to search

Punit Vajpeyi Over a year ago

HI there might be something wrong in your calling as I have tried that and didn't got any error.

Jai · Accepted Answer · 2015-12-14 07:25:48Z

0

As you have used .join() in the returned array so that has been converted to a string. I suggest you not to .join(" ") with space.

Instead you can return a string with # appended value and just .join("') it without space, it will output a comma separated string of hash tag values.

You can do this:

var myArray = $("option:selected").map(function(){ 
    return '#'+this.value; 
}).get().join(","); 
// would output #one, #two, #three

Now you can make a selector of the var myArray:

$(myArray).each(function (){
    var val = $(this).find(':ckecked').val();
    console.log(val);
});

edited Dec 14, 2015 at 7:25

answered Dec 13, 2015 at 9:08

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

Vinay Kashyap Over a year ago

thats great idea but i need to add the options as class name hence using .join(" ") with space and then finding # with same name using '#'+this.value

Mohamed-Yousef · Accepted Answer · 2015-12-13 08:59:06Z

0

try this to create the array

var myArray = [];
$("option:selected").each(function(){
    var ThisIt = $(this);
    myArray.push($.trim(ThisIt.val()));
});

and then use

$.each(myArray , function(i){
  var Id = $.trim(myArray[i]);
  if($('#'+Id).length > 0){
      $('#'+Id +' input[type="checkbox"]:checked').each(function(){
          alert($(this).val());
      });
  }
});

edited Dec 13, 2015 at 8:59

answered Dec 13, 2015 at 8:07

Mohamed-Yousef

24k3 gold badges21 silver badges28 bronze badges

4 Comments

Vinay Kashyap Over a year ago

Hi thanks for your response when i try this in console I see Error : Uncaught TypeError: Cannot use 'in' operator to search

Mohamed-Yousef Over a year ago

@VinayKashyap try to use .join(",");

Vinay Kashyap Over a year ago

Tried it but no luck with .join(","); do you think i need to phrase this or something?

SnareChops Over a year ago

@VinayKashyap could you update your question with the EXACT code you are using in the console? The Cannot use 'in' operator to search seems to be an error in a different piece of code than in the above answer. Also jQuery version + Browser version would help in case your jQuery version is incompatible with your browser. Also what do you mean by "phrase this"? If you created a JSFiddle that would also help.

Collectives™ on Stack Overflow

Jquery find ID's that match array

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related