別の選択オプションに基づいて選択オプションのドロップダウン値を表示

Question

2つのドロップダウン選択オプションがあります。最初は選択された州のためのもので、2番目の都市は選択された都市です。いずれかが州のドロップダウンから選択すると、関連するコンテンツが第2の選択肢の選択肢に表示されるはずです（これは関連する都市です）。私はいくつかのコードを持っていますが、動作していません。

<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" が、あなたはそれをhaven`t。あなたは、選択したクラスを追加しようとすることができます

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であなただけの代わりに、完全なドロップダウンのオプションのためのコードを書くことができます。