当第一个或第二个下拉列表的值被更改时,如何使用php和jQuery加载数据到第三个下拉列表

dw1jzc5e  于 2023-02-08  发布在  jQuery
关注(0)|答案(1)|浏览(130)

第三个下拉列表依赖于第一个和第二个下拉列表,并且是不同的。我想在第一个或第二个下拉列表的值改变时加载数据到第三个下拉列表。我的问题是jQuery部分,而不是php。
感谢你的协助。

我的HTML

<select name="first" id="first">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
</select>

<select name="second" id="second">
 <option value="1">Item 1</option>
 <option value="2">Item 2</option>
</select>

<select name="third" id="third">
 //load data when the values of either the first or the second dropdown are changed
</select>

我尝试的诡计

$(function(){
  $("#first").change(function() || $("#second").change(function(){
    $.post("third.php", {first: $("#first").val(), second: $("#second").val()}, function(data){
    $("#third").html(data);
    });
    return false; 
  });  
});
ss2ws0br

ss2ws0br1#

你想委派

$(function() {
  $("#third").hide();
  $("#dropdowns").change(function() {
    $("#third").find('option').not(':first').remove();
    const first = $("#first").val();
    const second = $("#second").val();
    if (first !== "" && second !== "") {
      console.log(first,second)
      $.post("third.php", {
        first: first,
        second: second
      }, function(data) {
        $("#third")
          .append(data)
          .show();
      });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropdowns">
  <select name="first" id="first">
    <option value="">Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
  </select>

  <select name="second" id="second">
    <option value="">Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
  </select>

</div>
<select name="third" id="third">
  <option value="" disabled>Please select</option>
  //load data when the values of either the first or the second dropdown are changed
</select>

相关问题