触发选择崩溃

不可选择的选择选项我要增强现有<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>

任何想法？

来源

2017-05-26 Álvaro González

是什么＃3是什么意思？你的意思是事件处理？ – serkan

你到底想做什么？ –

@ serkandemirel0420不知道您是否尝试了“运行代码段”按钮，但我刚刚意识到第二个代码段似乎只适用于Firefox。在Firefox中，警报显示，但下拉菜单保持打开状态。在例如Chrome甚至无法点击。 –

我以前的值存储在属性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>

来源

2017-05-26 08:55:00

This Works。

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

来源

2017-05-26 08:44:24 serkan

试试这个

<!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){ 
 
\t 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>

来源

2017-05-26 09:03:41

试试这个保存旧值和全局变量上click事件在onchange事件

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); 
 
    } 
 

 
    }) 
 
});

<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 value="fr">France</option> 
 
    <option value="uk">United Kinddom</option> 
 
    </optgroup> 
 
</select>

来源

2017-05-26 09:07:11 prasanth

.passing的AJAX功能简而言之：

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

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

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

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

来源

2017-05-29 11:52:42

触发选择崩溃

回答

相关问题