javascript - JQuery Select 选项在 Firefox 中只能工作四次

Question

这是从选择元素到单选元素的转换器，转换器从选择选项生成单选按钮。选择选项随 radio 变化而变化。 问题出在浏览器 Firefox 中，在 4 次更改 radio 选择后，选择选项没有改变。 但更奇怪的是，在 Inspect Element (Q) Ctrl+Shift+c 中更改了选择选项。

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

			(function(){
				$('.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_).removeAttr('selected');
					});
					$($self).find('option[value=' + value + ']').attr("selected",true).parent().trigger('change');
					
				});
			})(jQuery);
			
			//$(this).hide();
			return $(this);
		}
	})(jQuery);
	$('#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">
	<option selected="selected" class="attached enabled" value="webrtc_chat">WebRTC</option>
	<option class="attached enabled" value="skype_chat">Skype</option>
	<option class="attached enabled" value="facebook_chat">Facebook</option>
	<option class="attached enabled" value="google_chat">Google Hangouts</option>
</select>

Answer 1

好的，经过一些研究:-p 找到了旧的答案..

在选择和取消选择您的 video_chat_variable 更改事件时使用 prop 而不是 attr ...现在工作正常:)

$('.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()                    
            });