In a div container, I have many other divs (which are orders) which contains 5 other divs, and the third of this div contain a select from which I need to check the selected value in order to set the background-color of the div class="order" depending the selected value.
<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>
Each div class="order" looks the same :
<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>
This is the select into the third row :
<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>
So the data to loop through look as followed :
<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>
I need now to find the selected value of each select and depending on the selected value to assign a different background-color to its div class="order"
<div class="order" row-id="1242" style="margin:0px; padding:0px; position: ">
</div>
I managed to do it for a for a table with tr and td and it was working fine with this jQuery function :
$(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
}
});
});
But I don't know how to start with this div structured form.
I guess I have to start with the following :
$(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();
but after it is a mystery. I'm stuck.