doy57007 2018-01-26 09:43
浏览 120
已采纳

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

I have drop-down for selecting country, based on country selected state will be displayed in drop-down. From state drop-down list state has to be selected. After selection country value is displayed,, but i want to fetch n display state name also. I'm unable to get state name, Please help me how to display state name. Php code is being used to display second dropdown list based on the value passed from first dropdown list. Its not the dropdown based on jQuery. 

<!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>                            

**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;

?>

country is displaying, but not state

</div>
  • 写回答

1条回答 默认 最新

  • dongxiao1591 2018-01-26 11:00
    关注

    I hope I understood correctly that after selecting a city from the second dropdown you also wish that value to appear after the country name? You could perhaps try like this - though no doubt jQuery has a better method of assigning the event handler to the second dropdown than this(?)

    The php is in the same file here for testing only.

    By adding selected disabled to both dropdowns means the initial value of select or please select cannot be chosen once a selection has been made- just a little enhancement perhaps ;-)

    <?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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

悬赏问题

  • ¥15 乌班图ip地址配置及远程SSH
  • ¥15 怎么让点阵屏显示静态爱心，用keiluVision5写出让点阵屏显示静态爱心的代码，越快越好
  • ¥15 PSPICE制作一个加法器
  • ¥15 javaweb项目无法正常跳转
  • ¥15 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 R语言卸载之后无法重装，显示电脑存在下载某些较大二进制文件行为，怎么办
  • ¥15 java 的protected权限 ，问题在注释里