如何根据PHP和jQuery中其他下拉列表的值填充下拉列表？

Question

我有一个下拉列表是从数据库中填充的，在同一页面上，我有第二个下拉列表，它是从第一个下拉列表的值中填充的。

我想为此使用ajax，所以我应该怎么做。 还有可以解决我的问题的教程或链接。

更新：这是我使用的代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $('#cat').onChange(function(){
    alert("oncha");
        if($('#cat').val() == 'uprofile'){
            file = 'uprofile.html';
        }else if ($('#cat').val() == 'other'){

            file = 'city.html';
        }
        $('#city').change(function(){
            loadusers = $.ajax({
                    type: "GET",
                    url: file,
                    cache: false,
                    success: function (html) {
                        $("#city").html(html);
                    }
            });
        });
    });
</script>

<tr>
           <td class="label"><span id="required_span">* </span>Category</td>
           <td colspan="2" class="data"><select name="cat" id="cat">
           <option value="0">--Select Category--</option>

           <option value="O/O">O/O</option>
           <option value="company driver">company driver</option>
           <option value="other">other</option>

           </select></td>
      </tr>

 <tr>
           <td class="label"><span id="required_span">* </span>City</td>
           <td colspan="2" class="data"><select name="city" id="city">
           <option value="0">--Select city--</option>



           </select></td>
      </tr>

这是city.html的内容

<option>1</option>
<option>2</option>

但甚至无法使用警报功能。 我在代码中缺少什么？

Answer 1

首先，您需要听下拉列表的更改，以便

$('#dropdown1').on('change',function(){});

在该函数中，您需要进行ajax调用，并替换另一个下拉菜单中的选项，因此

  value = $(this).find(':selected').val();
  url = //the url of the php handler
  $.post(url, {val: value},function(data){});

这将处理ajax请求，在该函数中您要填充第二个下拉列表。 您在此处实际执行的操作将完全取决于您要完成的工作以及如何返回数据。 对于此示例，我将以选项字符串形式返回数据。

  $('#dropdown2').html(data);

所以完成的功能看起来像这样，

  $('#dropdown1').on('change',function(){
    value = $(this).find(':selected').val();
    url = //the url of the php handler
    $.post(url, {val: value},function(data){
      $('#dropdown2').html(data);
    });
  });

请记住，您将需要进行更改以更好地适应所拥有的内容，但这应该使您朝正确的方向入手

Answer 2

您可以使用类似以下代码的内容：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

    $(function() {
        if($('select').val() == 'uprofile'){
            file = 'uprofile.html';
        }else if ($('select').val() == 'album'){

            file = 'album.html';
        }
        $('#dropdown').change(function(){
            loadusers = $.ajax({
                    type: "GET",
                    url: file,
                    cache: false,
                    success: function (html) {
                        $("#dropdown2").html(html);
                    }
            });
        });
    });
</script>
<body>
    <div id="edit-type-wrapper">
     <select id="dropdown">
       <option value="">Select one</option>
       <option value="albums">Album</option>
       <option value="uprofile">User Profile</option>
     </select>
     <select id="dropdown2">
     </select>
    </div>
</body>

显然，您需要从其他文件中返回数据。 希望这可以帮助

如何根据PHP和jQuery中其他下拉列表的值填充下拉列表？

问题描述

2 个解决方案

解决方案1
1 2012-02-22 13:06:09

解决方案2
1 已采纳 2012-02-22 13:09:32

如何根据PHP和jQuery中其他下拉列表的值填充下拉列表？

问题描述

2 个解决方案

解决方案1 1 2012-02-22 13:06:09

解决方案2 1 已采纳 2012-02-22 13:09:32

解决方案1
1 2012-02-22 13:06:09

解决方案2
1 已采纳 2012-02-22 13:09:32