する方法

最初のselectの値に基づいて別のselectを追加するにはどうすればよいですか？する方法

ときに最初selectボックスの変更、私は最初selectの値に基づいて、別のselectの値をフェッチし、DOMの新しいselectのオプションとして、それらを挿入するためのAJAXリクエストを作りたいです。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<title>Populate City Dropdown Using jQuery Ajax</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: "process-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"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</form> 
 
</body> 
 
</html>

出典

2017-08-17 punit saharawat

私は唯一の1があなたのHTMLで選択を参照することができますが、jQueryを使って、あなたは単に、 '$（ "＃のSELECT2"）を使用することができます。ヴァル（$（ "＃のSELECT1"）。valを（））; '2番目の選択肢を最初の値に設定する場合は、 – xander

'process-request.php'は何を返しますか？このコードを実行すると、国を選択した後、 ''の内容は何ですか？ –

-1

私はAJAXのこの構文を試すべきだと思います。

$("select.country").change(function(){ 
var selectedCountry = $(".country option:selected").val(); 
$.ajax({ 
    type: "POST", 
    url: "process-request.php", 
    data: { country : selectedCountry } 
    success: function(data){$("#response").html(data);}, 
    error: function(err){} 
})

}）;

出典

2017-08-17 06:49:22

なぜですか？あなたが示唆したのは古いスタイルのjQueryです。問題のコードは実際にはより良いです！ – xander

<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(); 
 
     
 
//sample data - code starts here 
 
     var data = '[{"id":1,"name":"Karnataka"},{"id":2,"name":"Karnataka2"}, {"id":3,"name":"Karnataka3"}]'; 
 
     data = jQuery.parseJSON(data); 
 
//sample data ends here 
 

 
     $('#response').append(' <label>State:</label><select class="state" id="state"> </select> '); 
 

 
     $('#response select').append($("<option />").val('').text('Select')); 
 

 
     $.each(data,function(index, value){ 
 

 
      $('#response select').append($("<option />").val(value.id).text(value.name)); 
 
     }); 
 
//add above code to your ajax success - code ends here.. 
 

 
     $.ajax({ 
 
      type: "GET", 
 
      url: "process-request.php", 
 
      data: { country : selectedCountry } 
 
     }).done(function(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"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
</form> 
 
</body> 
 
</html>

出典

2017-08-17 06:52:57 Rajapandian

答えて

関連する問題