I am facing the issue in Dependent Drop down when I selected the drop-down option, some products display and when I select the other option previous options also show, how to sort out this issue, I am using the empty() function it can create the another issue that if drop down have a single product in the option, product cannot be clickable, this option should be show in my drop down **<option>Select Processor</option>**, empty function can empty all the options from the select tag.How can I resolve this issue?
In the below screenshot when I select **Intel Corei7 3rd Generations** option 3 **RAMS** is available and when I select **Laser jet Printer** option it should show only 1 product I t can show me four, previous drop down data also visible but I don't want previous. How can I sort out this problem.
What I have tried:
<tr class="category processor" data-value="processor">
<td>
<span>Processor</span>
</td>
<td>
<select name="processor" id="processor" style="min-width: 100%;" class="select processors" onchange="getPrice(event)">
<option>Select Processor</option>
<!--
</select>
</td>
<!--
<td>
<input type="number" min="0" name="email" class="quantity" oninput="setTotalPrice(event)"/>
</td>
<!--
<td>
<input type="text" readonly class="unit-price" >
</td>
<!--
<td>
<input type="text" readonly class="total-price">
</td>
</tr>
<!--
<!--
<tr class="category ram" data-value="ram">
<td>
<span>Ram</span>
</td>
<td>
<select name="ram" id="rams" style="min-width: 100%;" class="select" onchange="getPriceRam(event)">
<option>Select Ram</option>
<!--
</select>
</td>
<!--
<td>
<input type="number" maxlength="6" min="0" min="10" name="email" class="quantity" oninput="setTotalPrice(event)"/>
</td>
<!--
<br>
<td>
<input type="text" readonly class="unit-price" >
</td>
<!--
<td>
<input type="text" readonly class="total-price">
</td>
</tr>
<!--
<script>
$("#motherboard").change(function(){
var mid = $("#motherboard").val();
console.log(mid);
$.ajax({
url: 'processor_data.php',
method: 'post',
data: 'mid=' + mid
}).done(function(processors) {
console.log(processors);
processors = JSON.parse(processors);
var htmll = '';
processors.forEach(function(processor) {
htmll += '<option value="' + processor.id + '">' + processor.product_title + '</option>';
})
$('#processor').append(htmll);
});
})
function getPriceRam(e){
e.preventDefault();
grandtotal();
var id = $(e.target).val();
let parent = e.target.parentNode.parentNode;
let category = parent.getAttribute("data-value");
$.ajax({
url:"load_dataram.php",
method:"POST",
data:{id:id},
success:function(data){
let unitPrice = parent.querySelector("input.unit-price");
unitPrice.value = data;
$(parent).attr("data-id", id);
$(parent).attr("data-quantity", 1);
parent.querySelector("input.quantity").value = 1;
parent.querySelector("input.total-price").value = +data * 1;
grandtotal();
}
});
}
$("#rams").change(function(){
var ramid = $("#rams").val();
})
$("#processor").change(function(){
var pid = $("#processor").val();
$.ajax({
url: 'data.php',
method: 'post',
data: 'pid=' + pid
}).done(function(data) {
console.log(data);
data = JSON.parse(data);
var html = '';
data.forEach(function(value) {
html += '<option value="' + value.id + '">' + value.product_title + '</option>';
})
$('#rams').append(html);
});
})
function getPriceRam(e){
e.preventDefault();
grandtotal();
var id = $(e.target).val();
let parent = e.target.parentNode.parentNode;
let category = parent.getAttribute("data-value");
$.ajax({
url:"load_dataram.php",
method:"POST",
data:{id:id},
success:function(data){
let unitPrice = parent.querySelector("input.unit-price");
unitPrice.value = data;
$(parent).attr("data-id", id);
$(parent).attr("data-quantity", 1);
parent.querySelector("input.quantity").value = 1;
parent.querySelector("input.total-price").value = +data * 1;
grandtotal();
}
});
}
$("#rams").change(function(){
var ramid = $("#rams").val();
})
</script>