doy57007
2018-01-26 09:43
浏览 108

使用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> 
    
    点赞 打赏 评论

相关推荐 更多相似问题