Jquery find each dynamically generated select inside div and add class to select if option value is " "

1
votes

I have dynamically generated select fields inside a div called mydiv. The id and class names also for each of my select fields are also dynamically generated.

I am trying to add a class called red-border to each of my select elements inside mydiv based on the value.

for example if Not mapped is selected by default its value is " " empty in my first select than class red-border gets added to my first select

Here is my js please help 

$('[class^="mydiv"]').find('option').each(function() {
    var myvalue= $(this).val();
    if (myvalue===" "){
        $(this).addClass("red-border");
    }else{
        $(this).addClass("green-border");
    }
});

<div class="mydiv" id="mydiv">
    <select id="dynamically_generated_select_169" class="someclass169">
        <option value=" ">Not mapped</option>
        <option value="1">Saab</option>
        <option value="2">VW</option>
        <option value="3" selected>Audi</option>
    </select>

    <!-- Another select Each select and its options are all dynamically generated -->

    <select id="dynamically_generated_select_170"class="someclass170">
        <option value="1">Saab</option>
        <option value=" ">Not mapped</option>
        <option value="2">VW</option>
        <option value="3" selected>Audi</option>
    </select>
</div>
4
javascriptjqueryhtml
Your code works fine if you fix Var myvalue= $(this).val(); to var myvalue= $(this).val(); You have spelled var with a V - Carsten Løvbo Andersen
@CarstenLøvboAndersen No, it doesn't. He also needs to change .find('option') to .find('select') - Toastrackenigma
Nope, he already took "select" with [class^="mydiv"]. @Toastrackenigma - Berkay
@Berkay Huh. My answer breaks if you change it back to .find('option'). The ^= operator selects all elements where the attribute begins with the value, i.e. all elements where the class begins with mydiv in this case. So this just serves to select mydiv. Inside mydiv, he is then trying to check and compare each option tag, when instead he should be trying to check and compare each select tag. - Toastrackenigma
Dude, you are drawing border around "select", ,he wants border around "option". See this. - Berkay

4 Answers

1
votes

you can not add option border color

we try your code with option background and border to select on chnage

// this example for each options

$('.mydiv select option').each(function() {
     var myvalue= $(this).val();
     if (myvalue===" "){
        $(this).addClass("red");
     }else{
        $(this).addClass("green");
     }
 });
 
 // this example on change select
 
 $('.mydiv_2 select').on('change',function() {
     var myvalue= $(this).val();
     if (myvalue===" "){
        $(this).removeClass('green-border').addClass("red-border");
     }else{
        $(this).removeClass('red-border').addClass("green-border");
     }
 });
.red {
  background: #f00;
}

.green {
  background: #0f0;
}

.red-border {
  border:solid 1px #f00;
}

.green-border {
  border:solid 1px #0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<h3>Example for each options</h3>

<div class="mydiv" id="mydiv">

  <select id="dynamically_generated_select_169" class="someclass169">
    <option value=" ">Not mapped</option>
    <option value="1">Saab</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>

 <!-- Another select Each select and its options are all dynamically generated -->

  <select id="dynamically_generated_select_170"class="someclass170">
    <option value="1">Saab</option>
    <option value=" ">Not mapped</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>

</div>

<br>

<h3>Example on change</h3>

<div class="mydiv_2" id="mydiv">

  <select id="dynamically_generated_select_169" class="someclass169">
    <option value=" ">Not mapped</option>
    <option value="1">Saab</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>

 <!-- Another select Each select and its options are all dynamically generated -->

  <select id="dynamically_generated_select_170"class="someclass170">
    <option value="1">Saab</option>
    <option value=" ">Not mapped</option>
    <option value="2">VW</option>
    <option value="3" selected>Audi</option>
  </select>
0
votes

You can use change with on which will check if the value is Not mapped than add a class red-border. And second was a minor typo in your code Var should be var: 

$('#mydiv select').on('change', function() {
  var myvalue = $(this).val();
  if (myvalue === " ") {
    $(this).removeClass('green-border').addClass("red-border");
  } else {
    $(this).removeClass('red-border').addClass("green-border");
  }
});

$(document).ready(function() {
  $('#mydiv select').trigger('change');
});
.red-border {
  border: 3px solid red;
}

.green-border {
  border: 3px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv" id="mydiv">

  <select id="dynamically_generated_select_169" class="someclass169">
  <option value=" ">Not mapped</option>
  <option value="1">Saab</option>
  <option value="2">VW</option>
  <option value="3" selected>Audi</option>
</select> // Another select Each select and its options are all dynamically generated

  <select id="dynamically_generated_select_170" class="someclass170">
  <option value="1">Saab</option>
  <option value=" ">Not mapped</option>
  <option value="2">VW</option>
  <option value="3" selected>Audi</option>
</select>

</div>
-1
votes

You had two problems with your code:

  • You were finding by option tags rather than select tags - you cannot style option tags, and they do not have a specified .val().
  • You had Var rather than var - JS is case-sensitive

Note that your code will still only run on first load. You will need to put it into an event handler (for an event like onchange) if you want it to update dynamically.

$('[class^="mydiv"]').find('select').each(function() {
 var myvalue= $(this).val();
 if (myvalue===" ")
 {
  $(this).addClass("red-border");

 }else 
 {
 $(this).addClass("green-border");
 }
 });
.red-border {
  border:solid 1px #f00;
}

.green-border {
  border:solid 1px #0f0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="mydiv">

  <select id="dynamically_generated_select_169" class="someclass169">
  <option value=" " selected>Not mapped</option>
  <option value="1">Saab</option>
  <option value="2">VW</option>
  <option value="3">Audi</option>
</select>

  <select id="dynamically_generated_select_170"class="someclass170">
  <option value="1">Saab</option>
  <option value=" ">Not mapped</option>
  <option value="2">VW</option>
  <option value="3" selected>Audi</option>
</select>
-2
votes

Your div has un Id "mydiv" so you should use it for the selecteur of your selects. Then, you are trying to find "option" but you said yo wanted the select input. Just put your selector to the select.

It should look like that :

$('#mydiv').find('select').each(function(){
     var myvalue = $(this).Val();
})

Try this out.