方法二:用JQuery实现。原理:把select中的数据取出拼成HTML的标签,然后单击,标签内容变成成刚才拼好的html 即为单选按钮,然后把select隐藏。代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
</style>
</head>
<body>
<select id="select">
<option value ="1">1</option>
<option value ="2">2</option>
<option value="3">3</option>
</select>
<div id="radioDiv">
</div>
<input type="button" id="button" value="click">
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var data = $('#select option'),
radio = [];
$.each(data, function(i,val){
radio.push($(val).text()+':<input type="radio" name="option" value="'+$(val).val()+'" /><br>');
})
$('#button').click(function(){
$('#radioDiv').html(radio.join(''));
$('#select').hide();
})
</script>
</html>