JQuery Select選項在Firefox中只能使用四次

Question

這是從select元素到radio元素的轉換器，轉換器從選擇選項中創建單選按鈕。選擇選項在無線電改變時改變。 問題出在瀏覽器Firefox中，經過4次更改收音機選擇後，選擇選項沒有改變。 但更奇怪的是，選擇選項在檢查元素（Q）Ctrl + Shift + c中發生了變化。

(function($) { 
 
\t \t $.fn.selectToRadio = function(){ 
 
\t \t \t var $self = $(this); 
 
\t \t \t $self.each(function(i, select){ 
 
\t \t \t \t var $select = $(select); 
 
\t \t \t \t var $ul_ = $('<ul class="video_chat_variable" />'); 
 
\t \t \t \t $select.find('option').each(function(j, option) 
 
\t \t \t \t { 
 
\t \t \t \t \t var $option = $(option); 
 
\t \t \t \t \t var vname = $option.text(); 
 
\t \t \t \t \t var $radio = $('<input type="radio" />'); 
 
\t \t \t \t \t $radio.attr('name', $select.attr('name')).attr('value', $option.val()).attr('id', $option.val()); 
 
\t \t \t \t \t if ($option.attr('selected')) $radio.attr('checked', 'checked'); 
 
\t \t \t \t \t var $li_ = $('<li />'); 
 
\t \t \t \t \t $li_.append($radio); 
 
\t \t \t \t \t $li_.append($("<label />").attr('for', $option.val()).html(vname)); 
 
\t \t \t \t \t $ul_.append($li_); 
 
\t \t \t \t }); 
 
\t \t \t \t $select.before($ul_); 
 
\t \t \t }); 
 

 
\t \t \t (function(){ 
 
\t \t \t \t $('.video_chat_variable').on('change', function() { 
 
\t \t \t \t \t var value = $('input[name=attribute_pa_video_chat]:checked').val(); 
 
\t \t \t \t \t //$($self).find('option:selected').removeAttr('selected'); 
 
\t \t \t \t \t $self.find('option').each(function(i, select_) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t $(select_).removeAttr('selected'); 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t $($self).find('option[value=' + value + ']').attr("selected",true).parent().trigger('change'); 
 
\t \t \t \t \t 
 
\t \t \t \t }); 
 
\t \t \t })(jQuery); 
 
\t \t \t 
 
\t \t \t //$(this).hide(); 
 
\t \t \t return $(this); 
 
\t \t } 
 
\t })(jQuery); 
 
\t $('#pa_video_chat').selectToRadio();

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select id="pa_video_chat" class="" name="attribute_pa_video_chat" data-attribute_name="attribute_pa_video_chat"> 
 
\t <option selected="selected" class="attached enabled" value="webrtc_chat">WebRTC</option> 
 
\t <option class="attached enabled" value="skype_chat">Skype</option> 
 
\t <option class="attached enabled" value="facebook_chat">Facebook</option> 
 
\t <option class="attached enabled" value="google_chat">Google Hangouts</option> 
 
</select>

Answer 1

OK，經過一番研究發現：磷老答案..

使用prop代替attr而選擇和非選擇您video_chat_variable改變事件......現在工作正常:)

$('.video_chat_variable').on('change', function() { 
       var value = $('input[name=attribute_pa_video_chat]:checked').val(); 
       //$($self).find('option:selected').removeAttr('selected'); 
       $self.find('option').each(function(i, select_) 
       { 
        $(select_).prop('selected',false); // changed from $(select_).removeAttr('selected'); 
       }); 
       $($self).find('option[value=' + value + ']').prop("selected",true).parent().trigger('change'); // changed from attr() to prop()      
      });