Question

我希望使用额外的«查看更多...»行来增强现有<select>标记，该行在选中时会显示一些GUI控件。当用户点击«查看更多...»时，我需要：

保留当前选定的<option>
无法选择其他行
下拉关闭

我的第一次尝试失败了＃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

这很有效。

<style type="text/css">
    .disabled {
        color: #808080;
    }
</style>


<script type="text/javascript">
    jQuery(function($) {
        $("select").each(function() {
            var $more = $("<option class='disabled>See more...</option>");
            $(this).append($more);
        });


        var options_sel_idx = 0;

        $("select").on("change", this, function(event) {
            if ($(this.options[this.selectedIndex]).hasClass("disabled")) {
                alert("a");
                this.selectedIndex = options_sel_idx;
            } else {
                options_sel_idx = this.selectedIndex;
            }
        });
    });
</script>

Answer 2

我将之前的值存储在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>

Answer 3

试试这个

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
jQuery(function($){
  $("select").each(function(){
    var $more = $("<option value='preserve'>See more...</option>")
      .prop("readonly", true)
      .appendTo($(this));
  });

var previousState = "";
 $("select").on('focus', function () {
       previousState = this.value;       
    }).change(function(e){
	if($(this).val() == "preserve"){
     $("select").val(previousState);
     alert("Put your fancy AJAX dialogue here");
    }
     previousState = this.value;  
});
});
</script>
</head>
<body>
<select id="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>

</body>
</html>

Answer 4

尝试在document.getElementById('<%= lblEmail.ClientID %>').InnerHTML = profile.getEmail();事件中使用全局变量保存旧值。通过click事件中的ajax函数

＆＃13;

onchange

＆＃13;

jQuery(function($) {
  $("select").each(function() {
    $("<option value='extra'>See more...</option>").appendTo($(this));
  });
  var old;
  $("select").on('click', function() {
    old = $(this).val();
  })
  $('select').on('change', function() {
    if ($(this).val() == 'extra') {
      //do stuff
      console.log("Put your fancy AJAX dialogue here");
      $(this).children('option').eq($(this).val(old).index()).prop('selected', true);
    }

  })
});

＆＃13;

Answer 5

简而言之：

整体disabled的想法与浏览器不兼容（Chrome不会在其上捕获点击事件）。
最简单的方法（手动跟踪值更改）似乎是最好的。

经过一些改进后，我的最终代码如下所示：

jQuery(function ($) {
	$("select").each(function () {
		var $select = $(this)
			.append(
				$("<option>See more...</option>").addClass("see-more")
			)
			.on("change", function () {
				var $selectedOption = $select.find("option:selected");
				if ($selectedOption.hasClass("see-more")) {
					$select.val(selectedValue);
					alert("Put your fancy AJAX dialogue here");
				} else {
					selectedValue = $selectedOption.val();
				}
			});
		var selectedValue = $select.find("option:selected").val();
	});
});

.see-more{
  color: green;
}

<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>

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

5 个答案: