Как добавить 2 варианта в выборе с помощью jquery?

Question

Я хочу добавить 2 опции в выпадающем списке выбора 1 вариант будет просто ВЫБРАТЬ ПРОДУКТ, а второй вариант будет продукт, который я получаю из базы данных. В основном, я сделал зависимые выпадающие списки, когда я выбираю конкретный процессор из списка, оперативная память должна быть загружена в соответствии с соответствием процессора, проблема, с которой я сталкиваюсь, я не могу выбрать оперативную память, когда в списке есть одна запись, я думаю, что лучшее решение дляИсправьте эту проблему, чтобы добавить 2 варианта вместо 1, но не знаете, как добавить капли одновременно. как вы видите на скриншоте

                           <!-- 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $("#processor").change(function(){
                    var pid = $("#processor").val();
                    $.ajax({
                        url: 'data.php',
                        method: 'post',
                        data: 'pid=' + pid
                    }).done(function(rams){
                        console.log(rams);
                        // var_dump(books);
                        rams = JSON.parse(rams);
                        $('#rams').empty();
                        rams.forEach(function(ram){
                            // $('#rams').append('<option>' + ram.product_title + '</option>')
                            $('#rams').append($('<option>', { 
                                    value: ram.id,
                                    text : ram.product_title 
                                }));
                        })
                    })
                })
                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>

Answer 1

Замените свой AJAX

 $.ajax({
        url: 'data.php',
        method: 'post',
        data: 'pid=' + pid
    }).done(function(data) {
        console.log(data);
        // var_dump(books);
        data = JSON.parse(data);
        $('#rams').empty();
        var html = '<option>Select Ram</option>';
        data.forEach(function(value) {
            html += '<option value="' + value.id + '">' + value.product_title + '</option>';
        })
        $('#rams').append(html);

    });