JSFiddle - React, Tailwind, and code Playground
HTML
<div class="wrapper">
<div class="row-fluid"> <table style="font-size:10px">
<tbody>
<tr>
<td>
<select id="Volum">
<option value="1x ">1x </option>
<option value="2x ">2x </option>
<option value="3x ">3x </option>
<option value="4x ">4x </option>
<option value="5x ">5x </option>
<option value="6x ">6x</option>
</select></td>
<td>
<select id="produse">
<option value="reset">Selecteaza Produs</option>
<option value="Canapele">Canapele</option>
<option value="Mobila">Mobila</option>
<option value="Fotolii">Fotolii</option>
<option value="Coltare">Coltare</option>
<option value="Seturi">Seturi</option>
</select></td>
<td>
<select id="ModeleColtare" class="sub_select_class">
<option value="Coltar Vera">Coltar Vera</option>
<option value="Coltar Onix">Coltar Onix</option>
<option value="Coltar Olyve">Coltar Olyve</option>
<option value="Coltar Adrian">Coltar Adrian</option>
</select></td>
<td>
<select id="ModeleSeturi" class="sub_select_class">
<option value="Set Dana">Set Dana</option>
<option value="Set Ramona">Set Ramona</option>
<option value="Set Gina">Set Gina</option>
<option value="Set Olyve">Set Olyve</option>
</select></td>
<td>
<select id="ModeleFotolii" class="sub_select_class">
<option value="Fotoliu Gina">Fotoliu Gina</option>
<option value="Fotoliu Dana">Fotoliu Dana</option>
<option value="Fotoliu Ramona">Fotoliu Ramona</option>
<option value="Fotoliu Florin">Fotoliu Florin</option>
<option value="Fotoliu Olyve">Fotoliu Olyve</option>
</select></td>
<td>
<select id="ModeleMobila" class="sub_select_class">
<option value="Selecteaza Mobilierul">Selecteaza Mobilierul</option>
<option value="Birou Mic"> Birou Mic</option>
<option value="Birou Mare"> Birou Mare</option>
<option value="Comoda 3 Sertare"> Comoda 3 Sertare</option>
<option value="Comoda 4 Sertare"> Comoda 4 Sertare</option>
<option value="Comoda Katy"> Comoda Katy</option>
<option value="Comoda Alin"> Comoda Alin</option>
<option value="Cuier Sorin"> Cuier...
CSS
#ModeleCanapele, #Manere, #Perne, #ModeleMobila, #Perne2, #Ornamente, #StofaPrincipala, #Piele, #Pal1, #Cheder, #Pal2, #ManereMobila, #ModeleColtare, #ModeleFotolii, #ModeleSeturi, #ParteSoldatCuiere, #ParteInsulaColtare, #ParteMonitorBirouri{
display: none;
}
.new-rect {
background: black;
width: 100%;
height: 30px;
}
JavaScript
$("#addMore").click(function() {
var newRow = $(".row-fluid:last").clone();
newRow.appendTo(".wrapper");
newRow.find('.sub_select_class').hide();
newRow.find( "#produse" ).change(function(){
produseChange(this, newRow);
});
});
$("#produse").change(function() {
produseChange(this, $('tr'));
});
function produseChange(self, row) {
var $this = $(self),
value = $this.val(); // save value
row.find('.sub_select_class').hide(); // we hide every second select
switch (value) { // we show only what needs to be visible
case 'Canapele':
row.find("#ModeleCanapele").show();
break;
case 'Coltare':
row.find("#ModeleColtare").show();
break;
case 'Mobila':
row.find("#ModeleMobila").show();
break;
case 'Fotolii':
row.find("#ModeleFotolii").show();
break;
case 'Seturi':
row.find("#ModeleSeturi").show();
break;
// ...etc
}
}
// PARTE SOLDAT CUIERE
$("#ModeleMobila").change(function(){
if($(this).val() == 'Cuier Mare' ||
$(this).val() == "Cuier Sorin"){
$("#ParteSoldatCuiere").show();
}else{
$("#ParteSoldatCuiere").hide();
$("#ModeleColtare").hide();
}
});
// PARTE INSULA COLTARE
$("#ModeleColtare").change(function(){
if($(this).val() == 'Coltar Onix'){
$("#ParteInsulaColtare").show();
}else{
$("#ParteInsulaColtare").hide();
}
});
// PARTE MONITOR BIROURI
$("#ModeleMobila").change(function(){
if($(this).val() == 'Birou Mare' ||
$(this).val() == "Birou Mic"){
$("#ParteMonitorBirouri").show();
}else{
$("#ParteMonitorBirouri").hide();
}
});
// BRATE CANAPELE
$("#ModeleCanapele").change(function(){
if($(this).val() == "Canapea Gina" ||
$(this).val() == "Canapea Dana" ||
$(this).val() == "Canapea Florin" ||
$(this).val() == "Canapea Lyon" ||
$(this).val() == "Canapea Dana")
{
...