Добавить два зависимых выбора с помощью кнопки добавления

Question

Я пытаюсь создать кнопку, которая добавляет / удаляет два зависимых от данных, взятых из базы данных. Это выбор

<!-- Products name dropdown -->
<select id="nameProducts">
    <option value="">Select Product</option>
    <?php 
    if(pg_num_rows($result) > 0){ 
        while($row = pg_fetch_assoc($result)){
            echo '<option value="'.$row['Prod_ID'].'">'.$row['Nombre_Prod'].'</option>'; 
        }
    }else{ 
        echo '<option value="">Product not available</option>'; 
    } 
    ?>
</select> 

<!-- Quantity dropdown -->
<select id="stock">
    <option value="">Select Quantity</option>
</select> 

Это скрипт, который обновляет второй выбор:

<script>
$(document).ready(function(){
    $('#nameProducts').on('change', function(){
        var Prod_ID = $(this).val();
        if(Prod_ID){
            console.log(Prod_ID)
            $.ajax({
                type:'POST',
                url:'ajaxData.php',
                data:'prod_id='+Prod_ID,
                success:function(html){
                    $('#stock').html(html);
                }
            }); 
        }else{
            $('#stock').html('<option value="">Select Product First</option>');
        }
    });     
    
});
</script>

Затем я пытался управлять добавлением / удалением этих выборок с помощью этого кода:

<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; 
    var addButton = $('.add_button'); 
    var wrapper = $('.field_wrapper');
    var fieldHTML = '   
                        <select id="nameProducts">
                            <option value="">Select Product</option>
                            <?php 
                            if(pg_num_rows($result) > 0){ 
                                while($row = pg_fetch_assoc($result)){
                                    echo '<option value="'.$row['Prod_ID'].'">'.$row['Nombre_Prod'].'</option>'; 
                                }
                            }else{ 
                                echo '<option value="">Product not available</option>'; 
                            } 
                            ?>
                        </select>
                    '; 
    var x = 1;
    
    //Once add button is clicked
    $(addButton).click(function(){
        if(x < maxField){ 
            x++; 
            $(wrapper).append(fieldHTML); 
        }
    });
    
    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove();
        x--; 
    });
});
</script>

и html код кнопки добавления / удаления:

<div class="field_wrapper">
    <div>
        <input type="text" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">Add Product</a>
    </div>
</div>

Проблема? Это не работает. Мне кажется, я не могу вставить только код html, который отображает два выбора в скрипт, который контролирует добавление / удаление. Извините, если вы найдете испанский sh var.

Answer 1

Вы смешиваете код сервера и код javascript. Это не сработает:

    var fieldHTML = '   
                    <select id="nameProducts">
                        <option value="">Select Product</option>
                        <?php 
                        if(pg_num_rows($result) > 0){ 
                            while($row = pg_fetch_assoc($result)){
                                echo '<option value="'.$row['Prod_ID'].'">'.$row['Nombre_Prod'].'</option>'; 
                            }
                        }else{ 
                            echo '<option value="">Product not available</option>'; 
                        } 
                        ?>
                    </select>

PHP - это серверный язык, который отображает страницу и отправляет ее клиенту (браузеру), включая любой javascript. Когда браузер считывает обработанный ответ с сервера, он выполняет любой код javascript, если он присутствует. Вы пытаетесь запустить php команд в браузере. Вы должны подумать о другом подходе к этому.

Вы можете, например, сделать php создать список и скрыть его в невидимом элементе. Затем js может копировать значения и отображать вещи, но он не будет запускать php код.

Еще лучше вы можете сделать вызов ajax на сервер и отобразить элементы option на основе серверных ответ.