How to append 2 options in select using jquery?

Question

I want to append 2 option in select drop down 1 option will be simply SELECT PRODUCT and 2nd option will be the Product that i fetch from database. Basically, i made a dependent drop downs when i choose specific processor from the list the ram should be loaded according to processor match, issue i am facing i am unable to select the ram when list have an single entry, i think the best solution to fix this issue to append 2 options instead of 1, but dont know how to append to drops simultaneous. as you see in the screenshot

                           <!-- 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

Replace Your 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);

    });