觸發第二個下拉框以顯示基於從第一個下拉框中選擇的值的值ajax

我有兩個引導程序下拉框。當我們點擊另一個下拉菜單時，其中一個會根據用戶選擇的國家顯示來自數據庫的所有國家名稱，另一個下拉菜單應該選擇狀態。當我點擊一個下拉菜單時，我做了一個ajax請求來顯示國家名稱。如何根據國家選擇觸發其他下拉菜單？觸發第二個下拉框以顯示基於從第一個下拉框中選擇的值的值ajax

$(".dropdown").on("show.bs.dropdown", function(){ 
       $.ajax({ 
        type:'post', 
        url: 'Service.php', 
        dataType: 'json',//since you wait for json 
        data: { 
         'service': 'dropdown_country' 
        }, 
        success: function(json){ 
        //now when you received json, render options 
         $.each(json, function(i, option){ 
          var rendered_option = '<li><a href="#">'+ option.country +'</a></li>'; 
          $(rendered_option).appendTo('.dropdown-menu'); 
         }) 
         $(".dropdown-menu li a").click(function(){ 
          $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>'); 
          $(this).parents(".dropdown").find('.btn').val($(this).data('value')); 
         }); 
        } 
       }) 


      })

有了上述事情，這兩個下拉菜單都顯示了點擊時的國家名稱。我只需要第一個下拉菜單來顯示國家名稱，其他下拉菜單應該在點擊時調用其他服務，以便根據國家/地區下拉列表中選擇的國家/地區顯示州名。我在觸發ajax調用中的第二個下拉框時被攻擊了。請幫忙。

來源

2016-08-16 Harnish Kumar

你能分享你的html嗎？ –

這裏它是http://pastebin.com/tr1sSDm2 –

@HarnishKumar - 我相信邏輯上國家下拉應該通過ajax填充只有一次，即在頁面加載。當有人點擊它時，無需重新填充它。另一方面;是;國家下拉菜單應該在每個國家的選擇上重新填充。 – vijayP

要附加的內容，以類.dropdown菜單類可以是相同的許多元件，從而解決此ID使用不同的名稱，然後追加內容

例如：

var rendered_option = '<li><a href="#">'+ option.country +'</a></li>'; 
          $(rendered_option).appendTo('#dropdown-menu1'); 
         }) 

var rendered_option = '<li><a href="#">'+ option.states +'</a></li>'; 
          $(rendered_option).appendTo('#dropdown-menu2'); 
         })

來源

2016-08-16 12:56:35

好吧。我的代碼中的任何示例？ –

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Populate City Dropdown Using jQuery Ajax</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.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"> 
      <!--Response will be inserted here--> 
     </td> 
    </tr> 
</table> 
</form> 
</body> 
</html>

上面的代碼處理並採取從PHP文件的請求

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

      // Define country and city array 
      $countryArr = array(
       "usa" => array("New Yourk", "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>"; 
     foreach($countryArr[$country] as $value){ 
     echo "<option>". $value . "</option>"; 
     } 
     echo "</select>"; 
     } 
     } 
     ?>

來源

2016-08-16 12:54:31 satwick

保留你要測試的名字 – satwick

明白了你的觀點。你只需要改變你的回覆響應下拉列表中的html。 http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/。我已經使用它也根據我的要求進行更改。檢查它並享受代碼。

來源

2016-08-16 13:01:32

觸發第二個下拉框以顯示基於從第一個下拉框中選擇的值的值ajax

回答

相關問題