Jquery 在数组中循环，找到此数组中包含的每个div的选定选项值，并指定背景色

在一个div容器中，我有许多其他div（它们是order），其中包含5个其他div，这个div的第三个包含一个select，我需要从中检查所选值，以便根据所选值设置

div class=“order”

的背景色

<div class="container-fluid form-inline" id="data">

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                        </div>

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                        </div>

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                        </div>

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                        </div>

</div>

这是第三行中的选择：

<div class="row">

    <div class="col-md-6 status">
        <h5>Statut</h5>
        <p>
            <select disabled="" class=" form-control">
                    <option value="">Status</option>
                            <option value="1">A valider</option>
                            <option value="2">Non traitée</option>
                            <option value="3" selected="">En traitement</option>
                            <option value="4">Achevée</option>
                            <option value="5">Annulée</option>
            </select>
        </p>
    </div>

</div>

我用tr和td为一个表成功地实现了这一点，并且这个jQuery函数运行良好：

$(document).ready(function() {
    $("tr").each(function(){
        var col_val = $(this).find("td:nth-child(4)").text();
        if (col_val == "A valider"){
        $(this).css('background-color', '#ffe5e5');
        $(this).find("td:nth-child(13) > div > a.btn.btn-xs.btn-success.btn-edit").hide();
        } else if (col_val == "Non traitée"){
        $(this).css('background-color', '#f6dcab');
        $(this).find("td:nth-child(13) > div > a.btn.btn-xs.btn-success.btn-edit").hide();
        // $(this).addClass('selected'); // the selected class color
        } else if (col_val == "En traitement"){
        $(this).css('background-color', '#d2d2f2');
        $(this).find("td:nth-child(13) > div > a.btn.btn-xs.btn-success.btn-edit").hide();
        // $(this).addClass('selected'); // the selected class color
        } else if (col_val == "Achevée"){
        $(this).css('background-color', '#c4ffc4');
        // $(this).addClass('selected'); // the selected class color
        }
    });
});

但我不知道如何从这个div结构化表单开始

我想我必须从以下几点开始：

$(document).ready(function() {
    $("#data").each(function(){
        var col_val = $(this).find("div > div:nth-child(4) > div.col-md-6.status > p > select > option:nth-child(4)").text();

但之后，这是一个谜。我被卡住了。

你可以做：

  $("#data .order").each(function (index, value) {
    var selectedValue = $(this).find(".status select").children("option:selected")[0].text; 
    console.log(selectedValue);

    if( selectedValue == "A valider" )  {
       $(this).css('background-color', "yellow");
    }      
    else if(selectedValue == "Annulée") {
     $(this).css('background-color', "blue");
    }     
 });

 // A valider
 // Non traitée
 // En traitement
 // Achevée

// Get the selected option from all the selects
$('#data select option:selected').each( function() {
   let selectedText = $(this).text();
   let cssColor     = 'white';

   // Set the desired related text color
   if(selectedText === 'A valider') {
       cssColor = 'blue';
   }
   else if ( selectedText === 'Non traitée' ) {
       cssColor = 'red';
   }
   // Cover other texts and colors as needed

   // Apply the color to the related div with the order class
   $(this).closest('div .order').css('background-color', cssColor)
});

该示例运行如下所示：

试试这段代码

  $(document).ready(function() {
    $(".order").each(function(){

var selectedVal = $(this).find("select option:selected").html();

switch(selectedVal){
case "A valider":
  $(this).css({"background-color":"red"})
  break;

case "En traitement":
  $(this).css({"background-color":"green"})
  break;

}

})

})

---

谢谢你的时间和你的工作，很好。我已经测试过了，正如您所说，文本继承了适当的颜色。遗憾的是，我无法接受您的回答，因为我已经问过：我现在需要找到每个select的选定值，并根据选定值为其div class=“order”指定不同的背景色对不起。不管怎样，我今天学到了一些新东西。谢谢你。好吧，不管怎样，这只是一个小编辑。我已经更新了答案。谢谢！Murali Nepalli已经解决了我的问题，干杯，Marc

  $("#data .order").each(function (index, value) {
    var selectedValue = $(this).find(".status select").children("option:selected")[0].text; 
    console.log(selectedValue);

    if( selectedValue == "A valider" )  {
       $(this).css('background-color', "yellow");
    }      
    else if(selectedValue == "Annulée") {
     $(this).css('background-color', "blue");
    }     
 });

 // A valider
 // Non traitée
 // En traitement
 // Achevée

// Get the selected option from all the selects
$('#data select option:selected').each( function() {
   let selectedText = $(this).text();
   let cssColor     = 'white';

   // Set the desired related text color
   if(selectedText === 'A valider') {
       cssColor = 'blue';
   }
   else if ( selectedText === 'Non traitée' ) {
       cssColor = 'red';
   }
   // Cover other texts and colors as needed

   // Apply the color to the related div with the order class
   $(this).closest('div .order').css('background-color', cssColor)
});

  $(document).ready(function() {
    $(".order").each(function(){

var selectedVal = $(this).find("select option:selected").html();

switch(selectedVal){
case "A valider":
  $(this).css({"background-color":"red"})
  break;

case "En traitement":
  $(this).css({"background-color":"green"})
  break;

}

})

})