触发第二个下拉框以显示基于ajax从第一个下拉列表中选择的值的值答案

【问题标题】：Triggering the second dropdown box to display values based on the values selected from first dropdown by ajax触发第二个下拉框以显示基于ajax从第一个下拉列表中选择的值的值
【发布时间】：2016-08-16 12:44:22
【问题描述】：

我有两个引导下拉框。一个将根据用户选择的国家/地区显示数据库中的所有国家/地区名称，当我们单击另一个下拉列表时，另一个下拉列表应选择州。单击一个下拉菜单时，我提出了一个显示国家/地区名称的 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 调用中的第二个下拉框感到震惊。请帮忙。

【问题讨论】：

你能分享你的html吗？
这里是pastebin.com/tr1sSDm2
@HarnishKumar - 我相信逻辑上国家下拉菜单应该只通过 ajax 填充一次，即在页面加载时。当有人点击它时，无需重新填充它。另一方面;是的; state 下拉菜单应重新填充每个选择的国家/地区。

标签： javascript jquery ajax twitter-bootstrap

【解决方案1】：

您将内容附加到类 .dropdown-menu 类对于许多元素可以是相同的，因此要解决这个使用不同名称的使用 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');
                        })

【讨论】：

【解决方案2】：

   <!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>";
      } 
       }
      ?>

【讨论】：

保留你需要测试的名字

【解决方案3】：

明白了。您只需要更改您的返回响应下拉列表的 html .. 这是一个例如http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/ 。我已经使用了它，也可以根据我的要求进行更改。检查并享受代码。

【讨论】：