Question

我有下拉选择国家/地区，根据国家选择的状态将显示在下拉列表中。必须选择从状态下拉列表状态。选择国家值后显示，但我也想获取n显示状态名称。我无法获取州名，请帮我告诉我如何显示州名。 Php代码用于根据从第一个下拉列表传递的值显示第二个下拉列表。它不是基于jQuery的下拉列表。

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Populate City Dropdown Based on Country Selected</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "post_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">
                <!--Response will be inserted here-->
            </td>
        </tr>
    </table>
</form>
</body> 
</html>

＆＃13;

**php Code (post_request.php)**

<?php
if(isset($_POST["country"])){
    // Capture selected country
    $country = $_POST["country"];
     
    // Define country and city array
    $countryArr = array(
                    "usa" => array("New York", "Los Angeles", "California"),
                    "india" => array("Mumbai", "New Delhi", "Bangalore"),
                    "uk" => array("London", "Manchester", "Liverpool")
                );
     
    // Display city dropdown based on country name
    if($country !== 'Select'){
        echo "<label>City:</label>";
        echo "<select id='state' class='state'>";
        foreach($countryArr[$country] as $value12){
            echo "<option value='$value12'>". $value12 . "</option>"; 
			
        }
        echo "</select>"; 
    } 
}
echo $country; 
//echo $state;

?>

＆＃13;

Answer 1

我希望我理解正确，从第二个下拉列表中选择一个城市后，您还希望在国家/地区名称后面显示该值？你也许可以尝试这样 - 虽然毫无疑问jQuery有一个更好的方法将事件处理程序分配给第二个下拉列表（？）

这里的php在同一个文件中仅用于测试。

在两个下拉列表中添加selected disabled表示一旦选择完成后，无法选择select或please select的初始值 - 可能只是稍微增强一点; - ）

<?php

    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST["country"] ) ){

        $cities = array(
                        'usa'   => array('New York', 'Los Angeles', 'California'),
                        'india' => array('Mumbai', 'New Delhi', 'Bangalore'),
                        'uk'    => array('London', 'Manchester', 'Liverpool')
                    );      

        if( isset( $_POST['country'] ) && array_key_exists( $_POST['country'], $cities ) ){

            $arr=$cities[ $_POST['country'] ];

            echo "
            <label>City:</label>
                <select id='state' class='state' onchange='dispcity(this.value)'>
                    <option selected disabled>Please Select";

            foreach( $arr as $key => $value ){
                printf("<option value='%s'>%s",$value,$value);
            }
            echo "
            </select>

            <span id='info'>
            {$_POST['country']}
            </span>"; 

        }
        exit(); 
    }

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Populate City Dropdown Based on Country Selected</title>
<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $("select.country").change(function(){
            var selectedCountry = $(".country option:selected").val();
            if( selectedCountry=='Select' ){
                $("#response").html('');
                return;
            }
            $.ajax({
                type: "POST",
                url: location.href, //"post_request.php",
                data: { country : selectedCountry } 
            }).done(function(data){
                $("#response").html(data);
            });
        });
    });
    function dispcity( value ){
        $("#info").html( $("select.country").val() +', '+ value )
    }
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>
                <label>Country:</label>
                <select class="country">
                    <option selected disabled>Select Country</option>
                    <option value="usa">United States</option>
                    <option value="india">India</option>
                    <option value="uk">United Kingdom</option>
                </select>
            </td>
            <td id="response">
                <!--Response will be inserted here-->
            </td>
        </tr>
    </table>
</form>
</body> 
</html>

使用php从动态下拉列表中获取所选选项的值

1 个答案: