Question

我遇到第二个选择列表选项是从第一个选择列表选择选项生成的情况。就像我们选择国家时在下一个选择列表中生成相应的状态。

在我的情况下，我在单页上有多个表单是相同的。任何人都可以让我知道如何在多种形式上实现它。

我尝试了以下代码，但它无效

        $(".country").change(function(){
       $.get("sample.php?val=" + $(this).val(),
        function(data){
            $(this).parent().next().children('.state').children('option').remove();
            $(this).parent().next().children('.state').append(data);
        });

提前感谢您的支持

Answer 1

假设“多个表单”都包含在同一<select class='country'>元素中的<select class='state'>和<form>，您可以使用.closest()和.find()来遍历而不是如此依赖于确切的DOM定位：

$('.country').change(function() { 
  var $stateSelect = $(this).closest('form').find('select.state');

  $.get('sample.php?val='+$(this).val(), function(data) {
    $stateSelect.empty().append(data);
  });
});

此外，您在回调中使用的$(this)可能无法正常工作。使用this作为jQuery的AJAX选项对象调用该回调函数。您可以使用函数作用域在事件函数中保存var $this = $(this);（如我保存$stateSelect），如果您需要将其保留在事件函数内的其他回调/闭包内。

Answer 2

    $(".country").change(function(){
   $.get("sample.php?val=" + $(this).val(),
    function(data){
        // console.log($this);
        $(this).parent().next().children('.state').children('option').remove();
        $(this).parent().next().children('.state').append(data);
    });

我不是百分百肯定，但您可能会误解this中的function(data)。尝试在我注释掉的行中运行console.log($this);。

以下是否有效？ this在JavaScript中是一个令人讨厌的概念，但它功能强大，值得学习。

    $(".country").change(function(){
     var country = $(this);
   $.get("sample.php?val=" + $(this).val(),
    function(data){
        country.parent().next().children('.state').children('option').remove();
        country.parent().next().children('.state').append(data);
    });

Answer 3

假设你的元素之间的关系是正确的，这应该有用，更简洁：

$('.country').change(function() { 
  var sel = $(this).parent().next().children('.state');
  $.get('sample.php?val='+$(this).val(), function(data) {
    sel.html(data);
  });
});

问题是this没有引用你在$.get回来时的想法，因为它是异步的，需要存储该引用并在返回时使用它。

清除在同一页面上使用多个表单时选择一个字段时选择选项

3 个答案: