Question

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

我想为此使用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 个答案: