触发第二个下拉框以基于基于Ajax从第一个下拉菜单中选择的值来显示值

Question

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

Answer 1

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

Answer 2

您要将内容附加到类.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');
                        })

Answer 3

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