Question

这是从选择元素到无线电元素的转换器，转换器从选择选项中生成单选按钮。无线电更改时选择选项已更改。问题出现在浏览器Firefox中，在选择4次更改收音机后，选择选项不会更改。但更奇怪的是，选择选项在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找到了旧答案..

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

JQuery Select选项在Firefox中只能运行四次

1 个答案: