Просмотрите массив, найдите значение выбранного параметра для каждого элемента div, содержащегося в этом массиве, и назначьте цвет фона

Question

В контейнере div у меня есть много других div (которые являются заказами), которые содержат 5 других div, и третий из этого div содержит выборку, из которой мне нужно проверить выбранное значение, чтобы установить цвет фонаиз 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 = "order" выглядит одинаково:

                        <div class="order" row-id="X" style="margin:0px; padding:0px; position: ">
                            <div class="col-md-1 sub_chkbox"></div>
                            <div class="row"></div>
                            <div class="row"></div>                 
                            <div class="row"></div>                 
                            <div class="row"></div>                 
                            <div class="row"></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>

Итак, данныечтобы просмотреть цикл следующим образом:

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

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                            <div class="col-md-1 sub_chkbox"></div>
                            <div class="row"></div>
                            <div class="row"></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" selected="">A valider</option>
                                                        <option value="2">Non traitée</option>
                                                        <option value="3">En traitement</option>
                                                        <option value="4">Achevée</option>
                                                        <option value="5">Annulée</option>
                                        </select>
                                    </p>
                                </div>

                            </div>
                            <div class="row"></div>                 
                            <div class="row"></div>                             
                        </div>

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                            <div class="col-md-1 sub_chkbox"></div>
                            <div class="row"></div>
                            <div class="row"></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" selected="">Non traitée</option>
                                                        <option value="3">En traitement</option>
                                                        <option value="4">Achevée</option>
                                                        <option value="5">Annulée</option>
                                        </select>
                                    </p>
                                </div>

                            </div>
                            <div class="row"></div>                 
                            <div class="row"></div>                             
                        </div>

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                            <div class="col-md-1 sub_chkbox"></div>
                            <div class="row"></div>
                            <div class="row"></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>
                            <div class="row"></div>                 
                            <div class="row"></div>                             
                        </div>

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                            <div class="col-md-1 sub_chkbox"></div>
                            <div class="row"></div>
                            <div class="row"></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">En traitement</option>
                                                        <option value="4" selected="">Achevée</option>
                                                        <option value="5">Annulée</option>
                                        </select>
                                    </p>
                                </div>

                            </div>
                            <div class="row"></div>                 
                            <div class="row"></div>                             
                        </div>

</div>

Теперь мне нужно найти выбранное значение каждого выбора и в зависимости от выбранного значения назначить другой цвет фона его div class = "order"

                        <div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
                        </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();

, но после этого остается загадкой. Я застрял.

Здесь понадобятся некоторые знания, спасибо. Марк

Answer 1

Вы могли бы сделать:

// 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)
});

Этот пример запуска выглядит следующим образом:

Answer 2

попробуйте этот код

  $(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;

}

})

})

Answer 3

  $("#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