Question

我终于找到了一个足够智能的选择菜单插件，可以在IE可比性模式下工作，并且还允许我在菜单选项被取代之前触发事件。这个很棒的插件名为jQuery Selectric。

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

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

我尝试在ajax sucess上使用$('select').selectric('refresh');，但是他的问题是菜单永远不会有机会打开，因为在打开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);
            }

        });
    }

Answer 1

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

第一种是在输入上显示隐藏的<div>，点击后，在其中显示加载图像。然后等到ajax结束，最后在更新的<input>上隐藏div和trigger点击事件，或者......

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

我推荐第二个，但可能还有其他解决方案。如果您需要任何帮助来实施其中任何一项，您应该打开一个新问题。

<强>更新

由于你想在点击之后做到这一点，我能想出的最好的解决方案就是这个。它的缺点是，如果ajax花费的时间太长而且用户离开了选择输入，它仍会重新打开。但我认为这可以通过一些焦点/类验证来解决。我会把它留在你手中。

我必须提醒你，这种用户界面可能会让一些用户（连接不良的用户）对可用或不可用的用户感到困惑。

$('#MasterWrapUps').selectric().on('selectric-init', function () {
  $('#MasterWrapUps').selectric('open');
});
$('.selectric').on('click', function () {
  setTimeout(function () { /* fake ajax */
    $('option:first-child').attr('disabled', true);
    $('#MasterWrapUps').selectric('refresh');    
  }, 600 );
});

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <script src="http://lcdsantos.github.io/jQuery-Selectric/jquery.selectric.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="http://lcdsantos.github.io/jQuery-Selectric/selectric.css">
  <style>.selectric-above .selectric-items {top: 100%; bottom: auto}</style>
</head>
<body>
    <select id="MasterWrapUps">
      <option value="ant">Ant</option>
      <option value="bird">Bird</option>
      <option value="cat">Cat</option>
    </select>
</body>
</html>

Answer 2

我在github https://github.com/lcdsantos/jQuery-Selectric/issues/109中将此报告为错误。插件莱昂纳多桑托斯的作者想出了一个聪明的黑客方法来解决这个问题。

他给了我这段代码

$('#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;
}

代码也可以在这个小提琴https://jsfiddle.net/lcdsantos/rgaeqbp6/

中找到

我希望这段代码可以帮助某人：）

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

2 个答案: