Question

我有三个填充下拉菜单。根据先前选择的选择填充每个下拉菜单。这意味着选择2＆＃34;选择器2＆＃34;基于＆＃34;选择器1和＃34;的选择，同时选择＆＃34;选择器3＆＃34;基于＆＃34;选择器2＆＃34;的选择。下拉菜单使用jquery动态填充，源来自MySQL表。

当我选择＆＃34;选择器1＆＃34;时，它会填充＆＃34;选择器2＆＃34;当我选择＆＃34;选择器2＆＃34;它填充＆＃34;选择器3＆＃34;。这很好用。问题在于，如果我有＆＃34;选择器1＆＃34;，＆＃34;选择器2＆＃34;和＆＃34;选择器3＆＃34;选中，我改变选择器1＆＃34;，＆＃34;选择器2＆＃34;的值。失去了（它应该如何），但是＆＃34;选择器3＆＃34;留在那里。我希望在＆＃34;选择器1和＃34;时重置选择器值3。已更改，并且不保留上一个旧选择器的旧值。

这是我的jquery

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>

    function getTertiary(val) {
        $.ajax({
            type: "POST",
            url: "get_tertiary.php",
            data:'tertiary_cat='+val,
            success: function(data){
                $("#tertiary_cat").html(data);
            }
        });
    }


    function getSecondary(val) {
        $.ajax({
            type: "POST",
            url: "get_secondary.php",
            data:'primary_cat='+val,
            success: function(data){
                $("#secondary_cat").html(data);
            }
        });
    }

    function selectPrimary(val) {
        $("#search-box").val(val);
        $("#suggesstion-box").hide();
    }
</script>

这是我的HTML：

<div class="frmDronpDown">
    <div class="row">
        <label>Primary:</label><br/>
        <select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);">
            <option value="">Select Primary</option>
            <?php
            foreach($results as $primaryCat) {
                ?>
                <option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option>
                <?php
            }
            ?>
        </select>
    </div>
    <div class="row">
        <label>Tertiary:</label><br/>
        <select name="secondary_cat" id="secondary_cat" class="demoInputBox" onChange="getTertiary(this.value);">
            <option value="">Select Seconary</option>
        </select>
    </div>
    <div class="row">
        <label>State:</label><br/>
        <select name="tertiary_cat" id="tertiary_cat" class="demoInputBox">
            <option value="">Select Tertiary</option>
        </select>
        <input type="text"/>
    </div>
</div>

当我尝试 - 改变

时

<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);">

为：

<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);getTertiary(this.value);">

我在error_log中收到此错误

PHP Warning:  Invalid argument supplied for foreach()

Answer 1

$results的价值可能不是数组，所以在此处添加支票将解决您的问题

 <?php
 if (is_array($results)){
    foreach($results as $primaryCat) {
        ?>
            <option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option>
        <?php
    }

 }
 ?>

Answer 2

重置第二个DD的值，重新启动第二个，如下所示：

function getSecondary(val) {
    $.ajax({
        type: "POST",
        url: "get_secondary.php",
        data:'primary_cat='+val,
        success: function(data){
            $("#secondary_cat").html(data);
             $("#tertiary_cat").html('<option value="">Select Tertiary</option>')
        }
    });

}

Answer 3

您可以更改getSecondary以清除主要更改时的第3个下拉列表：

function getSecondary(val) {
    $.ajax({
        type: "POST",
        url: "get_secondary.php",
        data:'primary_cat='+val,
        success: function(data){
            $("#secondary_cat").html(data);
            $('#tertiary_cat').html('<option value="">Select Tertiary</option>')
        }
    });
}

jQuery 3下拉菜单 - onChange

3 个答案: