jQuery在div中找到每个动态生成的选择，并添加类以选择选项值是否为“”

Question

我已经在名为mydiv的div中动态生成了选择字段。 我的每个选择字段的ID和类名也会动态生成。

我试图根据值向mydiv中的每个select元素添加一个名为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

您不能添加选项边框颜色

我们尝试使用带有背景和边框选项的代码来进行选择

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

Answer 2

您可以on其中使用change ，它将检查值是否Not mapped ，然后添加class red-border 。 第二个是您的代码中的一个小错字Var应该是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> 

Answer 3

您的代码有两个问题：

• 您正在按option标签而不是select标签查找-您无法设置option标签的样式，并且它们没有指定的.val() 。
• 你有Var ，而不是var - JS 是区分大小写

请注意，您的代码仍将仅在首次加载时运行。 如果您希望它动态更新，则需要将其放入事件处理程序中（例如onchange类的事件）。

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

Answer 4

您的div的ID为“ mydiv”，因此您应将其用作所选内容的选择者。 然后，您尝试查找“选项”，但您说要使用选择输入。 只需将选择器置于选择状态即可。

它看起来应该像这样：

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

试试看