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

-Werror

你正试图通过课程选择 - ＆＃34;选择状态＆＃34;，但你还没有。您可以尝试添加类来选择：

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

和ajax请求：

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

Answer 2

您的代码存在很多问题，因此您可以尝试使用以下代码。

<?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中，您只能为选项而不是完整的下拉列表编写代码。

Answer 3

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

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

       } 
   }
  ?>

根据其他选择选项显示选择选项的下拉值

3 个答案: