[英]Javascript/Jquery Change Select list to Radio Buttons
我有一個選項列表,我想更改為可點擊的單選按鈕。
這是我的選擇列表:
<select id="VariationGroup44" class="select" name="dlVariationGroup44">
<option value="Select Color"> Select Color </option>
<option selected="selected" value="1"> Black </option>
<option value="2"> Red </option>
<option value="3"> Green </option>
<option value="4"> Blue </option>
</select>
我已成功將其轉換為UL,但選項不再可點擊,這就是為什么我認為單選按鈕會更好。 歡迎所有建議,非常感謝!
工作流程:
編碼:
$('#VariationGroup44 option').each(function(i,obj){
$('<li><input type="radio" name="chkOpt'+i+'" value="'+$(obj).val()+'"/><label for="chkOpt'+i+'"> '+$(this).text()+'</label></li>').appendTo('ul');
});
function replaceSelect(select) {
var opts = $(select).find('option');
var name = $(select).attr('name');
var id = $(select).attr('id');
var list = [];
opts.each(function() {
list.push(
'<li>'+
'<label>'+
'<input type="radio" name="'+ name +'">'+
$(this).text()
'</label>'+
'</li>'
);
});
$(select).replaceWith('<ul id="'+ id +'">'+ list.join('') +'</ul>');
}
// Usage
replaceSelect('#VariationGroup44');
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.