javascript - Jquery在div中找到每个动态生成的选择，并添加类来选择选项值是否为 ""

Question

我在名为 mydiv 的 div 中动态生成了选择字段。我的每个选择字段的 id 和类名也是动态生成的。

我试图根据值向 mydiv 内的每个选择元素添加一个名为 red-border 的类。

例如，如果默认选择“未映射”，则在我的第一个选择中其值为“”空，而不是类 red-border 会添加到我的第一个选择

这是我的js，请帮忙

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

Answer 1

you can not add option border color

我们尝试使用您的代码来选择背景和边框以在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>