Jquery 在 div 中查找每个动态生成的选择并添加类以选择如果选项值为“”答案

【问题标题】：Jquery find each dynamically generated select inside div and add class to select if option value is " "Jquery 在 div 中查找每个动态生成的选择并添加类以选择如果选项值为“”
【发布时间】：2018-01-07 23:39:12
【问题描述】：

我在名为 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>

【问题讨论】：

如果您将Var myvalue= $(this).val(); 修复为var myvalue= $(this).val();，您的代码可以正常工作您使用V 拼写了var
@CarstenLøvboAndersen 不，它没有。他还需要将.find('option') 更改为.find('select')
不，他已经对[class^="mydiv"] 进行了“选择”。 @Toastrackenigma
@Berkay 嗯。如果您将其更改回.find('option')，我的答案就会中断。 ^= 运算符选择属性以值开头的所有元素，即在这种情况下，类以 mydiv 开头的所有元素。所以这只是用来选择mydiv。在mydiv 内部，他尝试检查和比较每个option 标记，而他应该尝试检查和比较每个select 标记。
老兄，你在“select”周围画边框，他想在“option”周围画边框。见this。

标签： javascript jquery html

【解决方案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>

【讨论】：

你不能添加选项类。搜索一下，用jquery就可以了。见this。
@Berkay 对不起，我的意思是要添加选项边框的边框类

【解决方案2】：

您可以将change 与on 一起使用，这将检查值是否为Not mapped，而不是添加一个类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>

【讨论】：

所以如果文档准备好有空值，客户端应该等待用户更改选择设置红色边框？
@Berkay - 添加了文档准备就绪的触发器。希望这会有所帮助。
在我看来；不需要这个，但无论如何它现在可以工作了:)
如果你运行代码 sn -p 只有绿色边框起作用。
@Jeremy - 是一个缺少的小东西。更新。 :)

【解决方案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>

【讨论】：

【解决方案4】：

你的 div 有 un Id "mydiv" 所以你应该用它来选择你的选择器。然后，您试图找到“选项”，但您说您想要选择输入。只需将您的选择器放到选择中即可。

应该是这样的：

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

试试这个。

【讨论】：

这并不能解决 OP 想要根据它们的值将类应用于选择元素的问题
但是你已经为这个值做了ifs。所以我试图引导你根据价值使用你的 if 点。当您选择项目时。您可以轻松检查它们的值并应用您想要的任何样式。