第二个下拉菜单自动更改其值答案

【问题标题】：Second drop down menu changing its value automatically第二个下拉菜单自动更改其值
【发布时间】：2016-12-23 11:12:52
【问题描述】：

我有 2 个下拉菜单，第二个下拉菜单是基于第一个下拉菜单填充的，问题是当按下 Tab 或 Submit 按钮时，第二个下拉菜单的值会自动更改或显示为空。

脚本：

function ajaxfunction(parent) {
  $(document).ready(function() {
    $('.control').change(function() {
      var Value = $(this).val();
      if (Value != null) {
        jQuery.ajax({
          type: 'POST',
          url: "name.php?comp_type=" + Value,
          success: function(data) {
            $('#name').html(data);
          }
        });
      }
    })
  })
}

HTML：

<!-- first dop down menu -->
<select name="type" class="control" onchange="ajaxfunction(this.value)">
  <option value="Electronice">Electroinc</option>
  <option value="Fashion">Fashion</option>
  <option value="Education">Electroinc</option>
</select>

<!-- second drop down menu -->
<select id="name" name="name"></select>

对不起我的英语

【问题讨论】：

您正在使用 ajaxfunction() onchange of select 并在该函数中绑定更改事件。这是不正确的
@anu 我刚刚修改了我的代码，工作正常谢谢你的评论

标签： javascript php jquery html drop-down-menu

【解决方案1】：

你应该在页面加载时调用该函数

<script>
      $(document).ready(function() {
          ajaxfunction();
      });

 function ajaxfunction(parent){
       $('.control').change(function(){
        var Value = $(this).val();
        if(Value != null){
            jQuery.ajax({     
                type: 'POST',         
                url: "name.php?comp_type="+Value,             
                success: function(data){ 
                    $('#name').html(data);
                }
            });
        }
    })

}
</script>

【讨论】：

同时从 dom 元素中移除 onchange="ajaxfunction(this.value)

【解决方案2】：

保持原样更新您的代码，如下所示

  $(document).ready(function() {
    $('.control').change(function() {
      var Value = $(".control").val();
      if (Value != null) {
        jQuery.ajax({
          type: 'POST',
          url: "name.php?comp_type=" + Value,
          success: function(data) {
            $('#name').html(data);
          }
        });
      }
    })
  });

和html如下：

<!-- first dop down menu -->
<select name="type" class="control">
  <option value="Electronice">Electroinc</option>
  <option value="Fashion">Fashion</option>
  <option value="Education">Electroinc</option>
</select>

<!-- second drop down menu -->
<select id="name" name="name"></select>

【讨论】：

【解决方案3】：

您可以使用另一个选项来显示下拉服务如下。您可以使用ajax throw显示内容。

Test.php

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <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"></td>
        </tr>
    </table>
 </form>
 </body> 
 </html>

处理请求.php

 <?php
 if(isset($_POST["country"])){
   $country = $_POST["country"];
   $countryArr = array("usa" => array("New Yourk", "Los Angeles", "California"), "india" => array("Mumbai", "New Delhi", "Bangalore"),
            "uk" => array("London", "Manchester", "Liverpool"));
   if($country !== 'Select'){
   echo "<label>Services:</label>";
   echo "<select>";
    foreach($countryArr[$country] as $value){
      echo "<option>". $value . "</option>";
     }
      echo "</select>";
      } 
     }
   ?>

【讨论】：