觸發選擇崩潰

不可選擇的選擇選項我要增強現有<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

觸發選擇崩潰

回答

相關問題