Question

我有三个＆lt; select＆gt;元素。选择1 选择2 选择3 选择1已启用，而选择2＆amp;默认情况下禁用3，因为它们取决于它们的“previousSibling”。选择1将填充来自MySQL查询的选项。当选择其中一个选项时，以下代码启用Select 2并使用AJAX调用填充它： $（ “＃选择1”）。改变（函数（）{ var id = $（this）.val（）; var dataString ='id ='+ id; $就（{ 类型：“POST”， url：'。/ php / selectProperty.php？nuocache ='+ （new Date（））。getTime（）， data：dataString， cache：false， async：false，成功：function（html）{ $（ “＃选择2”）HTML（HTML）。 $（'＃select2'）。prop（“disabled”，false）; //元素现已启用。 }}）; }）; 虽然Select3遵循相同的方法（$（“＃select2”）。change（function（）...）它没有被启用或填充，因为我可以想象更改方法需要从用户方面进行显式更改而不是只是改变了DOM。因为有时Select 2只有一个选项，所以change（）永远不会触发。是否有另一种方法可以激活Select 3的种群并启用它？例如，当Select 2失去其禁用属性时？

Answer 1

1st：您需要使用.on（）

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

或

$("body").on('change', '#select2' ,function(){});

但我认为.on（）会起作用

第二名为所有人制作一个代码

$('select[id^="select"]').on('change',function(){
  var ThisIt = $(this);
  var id= ThisIt.val();
  var getNextSelect = ThisIt.next('select[id^="select"]');
  var dataString = 'id='+ id;
  $.ajax({
    type: "POST",
    url: './php/selectProperty.php?nocache=' + (new Date()).getTime(),
    data: dataString,
    cache: false,
    async: false,
    success: function(html){
      getNextSelect.html(html).promise().done(function(){
            getNextSelect.prop("disabled", false); // Element(s) are now enabled.
      });
    } 
  });
});

Answer 2

HTML

首先，我们需要更新HTML，以便它不依赖于硬编码ID，这使我们将来更容易维护。

其次，我们可以指定一个父元素来附加我们的事件处理程序;而不是直接将其附加到每个选择菜单。在这种情况下，我使用“.chain-select”类作为我的父元素。

<div class="chain-select">

    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
    </select>

    <select disabled></select>

    <select disabled></select>

    <select disabled></select>

    <select disabled></select>

</div>

的JavaScript

现在我们已将事件处理程序附加到“.chain-select”，它将用作我们的委托目标。这意味着如果用户更改任何选择菜单，它是我们的“.chain-select”的后代，它将在事件冒泡到委托目标后触发我们的事件处理程序。

如果您要处理多个要添加基于事件的功能的元素或通过Ajax加载的元素，则此方法非常完美。

<script>

    // Document Ready
    $(function () {


         $('.chain-select').on('change', 'select', function (e) {
            var $select = $(e.currentTarget);

            // RESET ALL NOT YET SELECTED SELECT MENUS 
            $select.nextAll('select').prop('disabled', true).empty();

            $.ajax({
                type: "POST",
                url: './php/selectProperty.php?nocache=' + (new Date()).getTime(),
                data: {
                    id: $select.val()
                },
                cache: false,
                async: false,
                success: function (html) {

                    // ENABLE AND POPULATE THE NEXT SELECT MENU
                    $select.next('select').html(html).prop('disabled', false);

                }
            });

        });

    });

 </script>

启用上一个<select>时的jQuery fire函数

2 个答案: