CODEWITHSUNDEEP
javascriptjqueryhtml
user3548161
user3548161

Reputation: 119

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

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>

Upvotes: 1

Views: 3700

Answers (4)

Abdo-Host
Abdo-Host

Reputation: 4103

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>

Upvotes: 1

Milan Chheda
Milan Chheda

Reputation: 8249

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>

Upvotes: 0

JBO
JBO

Reputation: 270

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.

Upvotes: -2

toastrackengima
toastrackengima

Reputation: 8732

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>

Upvotes: -1

Related Questions