Question

我有2个简单的下拉列表，如果选择的城市下拉列表有价值＆＃34; Balikpapan＆＃34;它在服务下拉列表中的显示特定选项，如果没有显示其他选项：

这是我的功能代码：

function Kurir(){
    var kota = $('select[name="descity"] option:selected').text();
    kurir ='';
    kurir2='';
    if (kota == Balikpapan){
        kurir = '<option selected="true" style="display:none;">Pilih Kurir</option><option value="Kurir dalam Kota">Kurir dalam Kota</option>';
        $('#service').html(kurir);
    else
        kurir2 = '<option selected="true" style="display:none;">Pilih Kurir</option><option value="">Pilih Kurir</option><option value="jne">JNE</option><option value="pos">POS</option><option value="tiki">TIKI</option>';
        $('#service').html(kurir2); 
    }
}

这是我的下拉代码

<td><label for="kota">Kota</label></td>
                  <td><select id="descity" onchange="kurir();" class="" name="">
                     <option value="">Pilih Kurir</option>
                     <option value="Balikpapan">Balikpapan</option>
                     <option value="Malang">Malang</option>
                     <option value="Surabaya">Surabaya</option>
                  </select> 

<td><label for="Kurir">Kurir</label></td>
                  <td><select id="service" onchange="DestVal();PostProvCity();" class="" name="">
                     <option value="">Pilih Kurir</option>
                     <option value="jne">JNE</option>
                     <option value="pos">POS</option>
                     <option value="tiki">TIKI</option>
                  </select>

Answer 1

您可以使用其他选项显示下拉服务，如下所述。您可以使用ajax throw显示内容。

test.php的

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.js">    </script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select.country").change(function(){
            var selectedCountry = $(".country option:selected").val();
            $.ajax({
                type: "POST",
                url: "process-request.php",
                data: { country : selectedCountry } 
            }).done(function(data){
                $("#response").html(data);
            });
        });
    });
</script>

</head>
<body>
    <form>
        <table>
            <tr>
                <td>
                    <label>Country:</label>
                        <select class="country">
                            <option>Select</option>
                            <option value="usa">United States</option>
                            <option value="india">India</option>
                            <option value="uk">United Kingdom</option>
                        </select>
                </td>
                <td id="response"></td>
            </tr>
        </table>
     </form>
</body> 
</html>

过程request.php

<?php
if(isset($_POST["country"])){
$country = $_POST["country"];
$countryArr = array("usa" => array("New Yourk", "Los Angeles", "California"),
                    "india" => array("Mumbai", "New Delhi", "Bangalore"),
                    "uk" => array("London", "Manchester", "Liverpool"));
if($country !== 'Select'){
        echo "<label>Services:</label>";
        echo "<select>";
        foreach($countryArr[$country] as $value){
            echo "<option>". $value . "</option>";
        }
        echo "</select>";
    } 
}
?>

如果有任何查询，请告诉我。

Answer 2

只是对 AddWeb Solution Pvt Ltd 回答的一个小修改：

在 ajax 函数之前，如果已经存在基于先前选择的任何标签，则值得删除任何标签，这样无论何时用户进行选择，新结果都不会添加到先前的列表中。

$(document).ready(function(){
    $("select.country").change(function(){
        $("#response option").remove(); // add this line
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "process-request.php",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});

根据其他下拉列表PHP更改选项值

2 个答案: