javascript - 触发选择折叠的不可选择的选择选项

Question

我想增强现有的<select>带有附加“查看更多...”行的标记，选择该行时会显示一些 GUI 控件。当用户点击“查看更多...”时，我需要:

1. 当前选择<option>已保留
2. 无法选择其他行
3. 下拉菜单关闭

我的第一次尝试失败了 #1 和 #2:

jQuery(function($){
  $("select").each(function(){
    var $more = $("<option>See more...</option>")
      .on("click", function(){
        alert("Put your fancy AJAX dialogue here");
      })
      .appendTo($(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Choose &laquo;See more...&raquo; for more options:</p>
<select>
  <optgroup label="America">
    <option value="ca">Canada</option>
    <option value="us">United States</option>
  </optgroup>
  <optgroup label="Europe">
    <option selected value="fr">France</option>
    <option value="uk">United Kinddom</option>
  </optgroup>
</select>

如果我向“查看更多...”行添加禁用属性，则根据浏览器的不同，它会失败(Firefox保持下拉列表打开，Chrome保持下拉列表打开)根本不会处理 onclick 处理程序):

jQuery(function($){
  $("select").each(function(){
    var $more = $("<option>See more...</option>")
      .prop("disabled", true)
      .on("click", function(){
        alert("Put your fancy AJAX dialogue here");
      })
      .appendTo($(this));
  });
});

[disabled] {
  font-style: normal;
  color: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Choose &laquo;See more...&raquo; for more options:</p>
<select>
  <optgroup label="America">
    <option value="ca">Canada</option>
    <option value="us">United States</option>
  </optgroup>
  <optgroup label="Europe">
    <option selected value="fr">France</option>
    <option value="uk">United Kinddom</option>
  </optgroup>
</select>

有什么想法吗？

Answer 1

我将以前的值存储在oldValue中，然后如果它是“查看更多...”，我将恢复旧值:

jQuery(function($){
  var oldValue;
  $("select").on('focus', function () {
       oldValue = this.value;       
    }).change(function () {
       if (this.value=='See more...') {
          $("select").val(oldValue);
       }
       oldValue = this.value;       
    }).each(function(){
    var $more = $("<option>See more...</option>")
      .on("click", function(){
        alert("Put your fancy AJAX dialogue here");
      })
      .appendTo($(this));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>Choose &laquo;See more...&raquo; for more options:</p>
<select>
  <optgroup label="America">
    <option value="ca">Canada</option>
    <option value="us">United States</option>
  </optgroup>
  <optgroup label="Europe">
    <option selected value="fr">France</option>
    <option value="uk">United Kinddom</option>
  </optgroup>
</select>