Question

首先，我不确定这是Firefox或我的代码中的错误，但我无法在其他浏览器中重新创建该事件。我使用的是Firefox 32版本，但它也适用于旧版本的Firefox。

以下是我bootply的链接。我希望我的代码能够像amselect

一样工作

当我点击选择框时，会出现下拉列表。（正确）
我将鼠标移到我想要选择的选项上，然后突出显示该选项。（正确）
我将鼠标移动到选择框边界之外，而不点击选项。（正确）
我的鼠标现在位于选择框边界之外，选择选项仍然突出显示。（正确）
我左键单击，下拉列表消失，并且未填充选择框。（正确）
此时，如果我点击网页上除选择框以外的任何位置，则选择框的更改事件仍会触发，并使用我在下拉列表中所覆盖的值填充该框。（不正确的）

JQuery的

     $('.RolesTableSelect').on('change',function(event) {
     alert('change.');

      var opt = $(this);
      var obj = opt.closest('.RolesTableSelect');

      var Table = obj.closest('.RolesTable');

      var selected = obj.children("option:selected");

      selected.prop('disabled', 'disabled');


      if(selected.val() == 1){

          obj.children("option:gt(1)").prop('disabled', 'disabled');
          Table.find('tbody > tr').remove();
      }

      Table.children('tbody').append('<tr><td style="border:0px none !important;">' + selected.text() + ' <input type="hidden" name="AdMedium[]" value="' + selected.val() + '"></td><td style="border:0px none !important;" ><a href ="#" class="RemoveOption">Remove</a></td></tr>');

      obj.prop("selectedIndex", 0);


    });

    $('body').on('click', '.RolesTable > tbody > tr > td > a.RemoveOption', function(event) {
      event.preventDefault();


      var obj = $(this);


      var Table = obj.closest('.RolesTable');


      var td = obj.parent().siblings('td');

      var tr = obj.parent().parent();


      tr.remove();

      var value = td.children('input').val();



      var selected = Table.find('option[value="'+ value +'"]');

      if(selected.val() == 1)
      {
          Table.find('option:gt(1)').prop('disabled', '');
      }



      selected.prop('disabled', '');


    });

HTML

<div class="col-sm-6 col-sm-offset-4"><table class="RolesTable table">
      <thead>
        <tr>
          <th colspan="2" style="border:0px none !important;">
          <select class="RolesTableSelect form-control" style="color:#222;">
              <option class="PlaceHoldOption" disabled="" selected=""></option>
              <option value="1">None  (Free)</option>
              <option value="2">Academic  (Free)</option>
              <option value="3">Business/ Professional  (Free)</option>
              <option value="4">Diversity  (Free)</option>
              <option value="5">Engineering  (Free)</option>
              <option value="6">Finance and Accounting  (Free)</option>
              <option value="7">Information Technology  (Free)</option>
              <option value="8">Medical / Healthcare  (Free)</option>
              <option value="9">Other  (Additional cost)</option>
              <option value="10">Social Media  (Free)</option>
              <option value="11">Trades / Technical  (Free)</option>
              <option value="12">Veteran  (Free)</option>
               </select></th>
                </tr>
              </thead>
              <tbody></tbody></table><div></div>

</div>

提前致谢

关于Firefox中更改选择行为的JQuery

0 个答案: