Javascript 如何在使用jQuery Selectric打开之前禁用菜单选项？

我终于找到了一个足够聪明的选择菜单插件，可以在IE可比模式下工作，还可以在菜单选项被替换之前触发事件。这个很棒的插件叫做

我需要在显示选项之前触发一个事件，我想发出一个ajax请求，告诉我应该启用/禁用哪个选项

我能够在菜单打开之前发出ajax请求。但我很难尝试禁用这些选项。即使我禁用了这些选项，它们也始终处于启用状态

我试图使用

$（'select'）。selectric（'refresh'）在ajax上成功了，但它导致了一个问题，即菜单永远不会有机会打开，因为就在它打开之前，ajax请求将再次关闭它

如何动态禁用选项

这就是我所做的

    $('#MasterWrapUps').selectric();

    $('#MasterWrapUps').on('selectric-before-open', function (e) {

        var status = "noattempt";

        $.ajax({
            type: "GET",
            url: "/getStatus",
            dataType: "json",
            cache: false,
            success: function (data) {

                if ( data && ! $.isEmptyObject(data) ) {
                    status = data.status;
                }

                attrWrapUpMenu(status);

            }
        });

    });

    function attrWrapUpMenu(status)
    {
        $('.dispositionMenuOption').each(function (index, element) {

            var option = $(element);

            if ( customIsAllowed(status, option) ) {

                option.attr("disabled", false);

            } else {

                if( option.attr('selected') ) {
                    //At this point we know the option that is select can't be used, select the default value
                    $('#MasterWrapUps').val('0')
                }

                option.attr("disabled", true);
            }

        });
    }

由于您不知道ajax需要多长时间才能完成，因此我可以想出两种可能的解决方案：

第一种方法是在输入上显示一个隐藏的
，然后单击，在其中显示一个加载图像。然后等待ajax结束，最终隐藏div和更新的
上的单击事件，或者

您可以在页面加载后立即启动更新功能，并保持
禁用，直到ajax完成

我推荐第二种，但可能还有其他解决方案。如果你需要任何帮助来实现这些，你应该提出一个新的问题


更新

既然你想在点击后再做，我能想到的最好的解决方案就是这个。它的缺点是，如果ajax花费的时间太长，并且用户离开select输入，它将重新打开。但我认为这可以通过一些焦点/类验证来解决。我把它交给你

我必须提醒您，这种UI可能会让一些用户（连接不好的用户）对可用或不可用的内容感到困惑


$（'#masterwrapps'）.selectric（）.on（'selectric-init'，function（）{
$（“#masterwrapps”）.selectric（'open'）；
});
$（'.selectric'）。在（'click'，函数（）{
setTimeout（函数（）{/*ajax）*/
$（'option:first child'）.attr（'disabled'，true）；
$（“#MasterWrapUps”）.selectric（'refresh'）；
}, 600 );
});

JS-Bin
.selectric位于上方。selectric项{顶部：100%；底部：自动}
蚂蚁
鸟
猫
我在github中将此报告为一个bug。该插件的作者莱昂纳多·桑托斯（Leonardo Santos）提出了一种聪明的黑客方法来解决这个问题

他给了我这个密码

$('#MasterWrapUps').selectric();

var isOpen = false;
var selectricData = $('#MasterWrapUps').data('selectric');

$('#MasterWrapUps').on('selectric-open', function (e) {
    var status = "noattempt";

    if (!isOpen) {
    selectricData.close();

    $.ajax({
      type: "POST",
      url: "/echo/json/",
      dataType: "json",
      cache: false,
      data: {
        // emulate ajax delay on jsfiddle
        delay: 1
      },
      success: function (data) {
        if ( data && ! $.isEmptyObject(data) ) {
          status = data.status;
        }

        attrWrapUpMenu(status);
      }
    });

  }

});

function customIsAllowed() {
    return !!(Math.random()+.5|0);
}

function attrWrapUpMenu(status) {
  $('.dispositionMenuOption').each(function (index, element) {

    var option = $(element);

    if ( customIsAllowed(status, option) ) {

      option.prop('disabled', false);

    } else {

      if( option.prop('selected') ) {
        $('#MasterWrapUps').val('0');
      }

      option.prop('disabled', true);
    }

  });

  isOpen = true;
  selectricData.refresh();
  selectricData.open();
  isOpen = false;
}

代码也可以在这把小提琴中找到

我希望这段代码能帮助某些人：）
我认为这不是问题所在。或者，我可以设置
Async:False
，在ajax请求完成之前阻止下一个操作。这里的问题是如何在打开选项后将其显示为禁用。似乎我必须使用
刷新
函数，这会导致无限循环！