如何根据php和jquery中其他下拉列表的值填充下拉列表？_Php_Jquery_Ajax

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

php jquery ajax

如何根据php和jquery中其他下拉列表的值填充下拉列表？,php,jquery,ajax,Php,Jquery,Ajax,我有一个从数据库填充的下拉列表，在同一页上，我有一个从第一个值填充的第二个下拉列表我想用ajax来实现这一点，那么我应该怎么做呢。和教程或链接，从那里我可以解决我的问题更新：这是我使用的代码 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javas

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

我想用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>

但即使警报功能也无法工作。我在代码中缺少了什么？

首先，您需要收听下拉列表，以便进行更改

$('#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);
    });
  });

请记住，您将需要进行更改以更好地适应现有的情况，但这将使您朝着正确的方向开始

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

    <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>

显然，您需要从其他文件返回数据。希望这有帮助提示：如果你看右边的相关列，如果在第一个下拉列表中更改了值，那么jquery函数将被自动调用？现在没有。但是您可以始终将该值作为查询字符串发送，然后在另一个php文件示例中执行处理，即您可以执行的url url:'returnvalue.html？value='+$'select'可以消除第一部分问题是javascript的问题。首先，您没有包括$function{}；因此它无法将其与元素绑定，因为它们不在那里。change函数不能在city上，而只能在cat上，因为这是ajax需要启动的地方。在下一个注释中，我添加了javascript$函数{$'cat'.changefunction{if$'cat'.val=='upofile'{file='upofile.html'；}else if$'cat'.val=='other'{file='city.html'；}loadusers=$.ajax{type:GET，url:file，cache:false，success:function html{$city.html$city.html+html；}}}；}；$function{$'cat.changefunction{if$'cat.val=='upofile'{file='upofile.html'；}如果$'cat'.val='other'{file='city.html'；}loadusers=$.ajax{type:GET，url:file，cache:false，success:function html{$city.html$city.html+html；}}；}；}；