显示基于另一个选择选项的选择选项的下拉值

Question

我有两个下拉选择选项。第一个是选择州，第二个是选择城市。当任何一个从州下拉列表中选择时，相关内容应显示在第二个选择选项（将是相关城市）上。我有一些代码，但它不起作用。

   <div class="vali-form">
        <div class="col-md-6 form-group2">

        <?php
   include("connection.php"); 
   $query1=mysql_query("select * from location_master where parent_id='0' ORDER BY location") or die (mysql_error());
        echo" <label class='control-label'>Select State</label>";
        echo" <select required name='selectstate'>";
        echo"<option>Select</option>";
        while($row1=mysql_fetch_array($query1))
        {   

            echo"<option value='".$row1['id']."'>".$row1['location']."</option>";
        }
        echo" </select>";
       ?> 

        </div>
        <div class="col-md-6 form-group2"  id="response">

         <label class='control-label'>City:</label>
     <select>

            <?php
   if(isset($_POST["selectstate"])){
// Capture selected country
$selectstate = $_POST["selectstate"];

// Define country and city array
$query1=mysql_query("select * from location_master where id='$selectstate'") or die (mysql_error());

        $row1=mysql_fetch_array($query1);


    // Display city dropdown based on country name
   if($selectstate !== 'Select'){

    foreach($row1[$selectstate] as $value){
        echo "<option>". $value . "</option>";
    }

   } 
   }
   ?>

 </select>        

        </div>
        <div class="clearfix"> </div>
        </div>

jQuery-AJAX 代码如下。

     <script type="text/javascript" src="http://code.jquery.com/jquery.js">
  </script>
  <script type="text/javascript">
  $(document).ready(function(){
   $("select.selectstate").change(function(){
    var selectedstate = $(".selectstate option:selected").val();
    $.ajax({
        type: "POST",
        url: "locpac.php",
        data: { selectstate : selectedstate } 
    }).done(function(data){
        $("#response").html(data);
    });
   });
   });
   </script>

Answer 1

你的代码有很多问题，希望这个工作

<div class="col-md-6 form-group2">
    <?php
       include("connection.php"); 
       $query1=mysql_query("select * from location_master where parent_id='0' ORDER BY location") or die (mysql_error());
    ?>
    <label class='control-label'>Select State</label>";
    <select required name='selectstate' id="selectstate">
        <option>Select</option>
        <?php
            while($row1=mysql_fetch_array($query1))
            {   
                ?>
                <option value="<?php echo $row1['id'];?>"><?php echo $row1['location'];?></option>
                <?php
            }
            ?>
        </select>

        </div>
        <div class="col-md-6 form-group2">

           <label class='control-label'>City:</label>
           <select id="location"></select>        

        </div>
        <div class="clearfix"> </div>
        </div>

<script type="text/javascript" src="http://code.jquery.com/jquery.js">
  </script>
  <script type="text/javascript">
      $(document).ready(function(){
         $("#selectstate").change(function(){
             var selectedstate = $(this).val();
             $.ajax({
                type: "POST",
                url: "location.php",
                data: "selectstate="+selectedstate,
             }).done(function(data){
                 $("#location").html(data);
             });
          });
       });
   </script>

创建一个我在这里调用的新页面'location.php并将下面的代码放在那里

<?php
    if(isset($_POST["selectstate"])){
    // Capture selected country
        $selectstate = $_POST["selectstate"];
        $query1=mysql_query("select * from location_master where id='$selectstate'") or die (mysql_error());


        if($selectstate !== 'Select'){

            while($value = mysql_fetch_array($query1)) {
                ?>
                   <option><?php $value['field-name'];?></option>
                <?php
            }

       } 
   }
  ?>

Answer 2

$("select.selectstate").change(function(){...

您正在尝试使用类-“selectstate”进行选择，但您没有。您可以尝试添加类来选择：

echo" <select required name='selectstate' class='selectstate'>";

还有ajax请求：

$.ajax({
    type: "POST",
    url: "locpac.php",
    dataType: "html",
    data: { selectstate : selectedstate } 
}).success(function(data){
    $("#response").html(data);
});

Answer 3

你的代码有很多问题，所以你可以试试下面的代码。

<?php
   include("connection.php"); 
?>
<div class="form-group">
    <div class="row">
        <label>State:</label><br/>
        <select name="selectstate" id="State-list" class="demoInputBox" onChange="getCity(this.value);">
        <option value="">Select State</option>
        <?php
        $query1=mysql_query("select * from location_master where parent_id='0' ORDER BY location") or die (mysql_error());
        while($row1=mysql_fetch_array($query1))
        {   

            echo"<option value='".$row1['id']."'>".$row1['location']."</option>";
        }

        ?>
        </select>
    </div>
    <div class="row">
        <label>City:</label><br/>
        <select name="City" id="response" class="demoInputBox">
        <option value="">Select City</option>
        </select>
    </div>
</div>

<script>
function getCity(val) {
    $.ajax({
    type: "POST",
    url: "locpac.php",
    data:'selectstate ='+val,
    success: function(data){
        $("#response").html(data);
    }
    });
}
</script>

在locpac.php 中，您可以只为选项而不是完整的下拉菜单编写代码。