使用添加按钮添加两个依赖选择答案

【问题标题】：Add two dependent select with add button使用添加按钮添加两个依赖选择
【发布时间】：2020-07-08 20:10:56
【问题描述】：

我正在尝试使用从数据库中获取的数据创建一个添加/删除两个依赖项的按钮。这是选择

<!-- 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 代码粘贴到控制添加/删除的脚本中。抱歉，如果您发现任何西班牙语变量。

【问题讨论】：

标签： javascript html jquery ajax database

【解决方案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 调用并根据服务器的回答呈现选项元素。

【讨论】：