触发第二个下拉框以显示基于从第一个下拉框中选择的值的值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

回答

相关问题