Как удалить параметр данные который был выбран в предыдущем выпадающем списке из других выпадающих списков

---

Я сталкиваюсь с проблемой в зависимом выпадающем списке, когда я выбрал опцию выпадающего списка, некоторые продукты отображаются, и когда я выбираю другую опцию предыдущие опции также показывают, как разобраться в этой проблеме, я использую функцию empty() она может создать другую проблему, что если выпадающий список имеет один продукт в опции, продукт не может быть кликабельным, эта опция должна быть показана в моем выпадающем списке **<option>Select Processor</option>**, пустая функция может очистить все параметры из тега select.Как я могу решить эту проблему?

На приведенном ниже скриншоте, когда я выбираю **Intel Corei7 3-го поколения** опция 3 **RAMS** доступна, и когда я выбираю **Laser jet Printer** option, он должен показывать только 1 продукт, который я не могу показать мне четыре, предыдущие выпадающие данные также видны, но я не хочу предыдущего. Как я могу разобраться в этой проблеме.

Что я уже пробовал:

<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>
                                            <!-- <?php echo processor_brand($connect); ?> -->
                                          </select>
                                        </td>
                                        <!-- QUANTITY -->
                                        <td>
                                            <input type="number" min="0" name="email" class="quantity" oninput="setTotalPrice(event)"/>
                                        </td>
                                        <!-- per item price -->
                                        <td>
                                            <input type="text"  readonly class="unit-price" >
                                        </td>
                                        <!-- Total Price -->
                                        <td>
                                            <input type="text" readonly  class="total-price">
                                        </td>
                                    </tr>
                             
                                  
                                <!-- End Processor Section -->
        
        
                                <!-- Start Ram Section -->
                                      <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>
                                              <!-- <?php echo ram_brand($connect); ?> -->
                                            </select>
                                          </td>
                                          <!-- QUANTITY -->
                                          <td>
                                              <input type="number" maxlength="6" min="0" min="10" name="email" class="quantity" oninput="setTotalPrice(event)"/>
                                          </td>
                                          <!-- per item price -->
                                          <br>
                                          <td>
                                              <input type="text"  readonly class="unit-price" >
                                          </td>
                                          <!-- Total Price -->
                                          <td>
                                              <input type="text" readonly  class="total-price">
                                          </td>
                                      </tr>
                                
                                <!-- End Ram Section -->

<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);
                        // $('#processor').empty();
                        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();
                                        // console.log(id);
                                        let parent = e.target.parentNode.parentNode;
                                        // console.log(parent);
                                        let category = parent.getAttribute("data-value");
                                        // console.log(category);
                                        $.ajax({
                                            url:"load_dataram.php",
                                            method:"POST",
                                            data:{id:id},
                                            success:function(data){
                                                // console.log(id);
                                                let unitPrice = parent.querySelector("input.unit-price");
                                                // console.log(unitPrice);
                                                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();
    				// console.log(ramid);
                })
    
    
    $("#processor").change(function(){
    				var pid = $("#processor").val();
                    $.ajax({
                        url: 'data.php',
                        method: 'post',
                        data: 'pid=' + pid
                    }).done(function(data) {
                        console.log(data);
                        // var_dump(books);
                        //  $('#rams').empty();
                        data = JSON.parse(data);
                        // $('#rams').empty();
                        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();
                                        // console.log(id);
                                        let parent = e.target.parentNode.parentNode;
                                        // console.log(parent);
                                        let category = parent.getAttribute("data-value");
                                        // console.log(category);
                                        $.ajax({
                                            url:"load_dataram.php",
                                            method:"POST",
                                            data:{id:id},
                                            success:function(data){
                                                // console.log(id);
                                                let unitPrice = parent.querySelector("input.unit-price");
                                                // console.log(unitPrice);
                                                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();
    				// console.log(ramid);
                })
    </script>

---