62,046
社区成员
发帖
与我相关
我的任务
分享Javascript+HTML 请大家帮忙。
网页里有一个下拉列表和一个OK按钮，要求点击后下拉列表变成单选按钮，用JS实现，JQuery实现优化。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" BackColor="White" Width="80px">
<asp:ListItem Value="张三"></asp:ListItem>
<asp:ListItem Value="李四"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="OK" />
</div>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" BackColor="White" Width="80px">
<asp:ListItem Value="张三"></asp:ListItem>
<asp:ListItem Value="李四"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="OK" />
</div>
</form>
</body>
</html>
...全文
请发表友善的回复…
发表回复
huangwenquan123 2011-05-29
- 打赏
- 举报
[Quote=引用 4 楼 zell419 的回复:]
HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="t……
[/Quote]这样创建的radio ie下点击不了
HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="t……
[/Quote]这样创建的radio ie下点击不了
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function change(){
var drop = document.getElementById("DropDownList1");
var option = drop.getElementsByTagName("option");
for(var i=0;i<option.length;i++){
var ra = createElement("input","a");
ra.type="radio";
ra.value=option[i].value;
document.body.appendChild(ra);
document.body.appendChild(document.createTextNode(option[i].value));
}
document.getElementById("div").removeChild(document.getElementById("DropDownList1"));
return false;
}
function createElement(type, name) {
var element = null;
try {
element = document.createElement('<'+type+' name="'+name+'">');
} catch (e) {
}
if (!element) {
element = document.createElement(type);
element.name = name;
}
return element;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div">
<asp:DropDownList ID="DropDownList1" runat="server" BackColor="White" Width="80px">
<asp:ListItem Value="张三"></asp:ListItem>
<asp:ListItem Value="李四"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" OnClientClick="return change()" runat="server" Text="OK" />
</div>
</form>
</body>
</html>
zell419 2011-05-29
- 打赏
- 举报
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var t = function(){
// $("#DropDownList1 option").each(function(){
// $("div:first").append("<input type=\"radio\" name=\"uName\" value=\""+$(this).val()+"\" />"+$(this).val()+"");
// });
// $("#DropDownList1").remove();//你的任务完成了 ，你消失吧。
var items = document.getElementById("DropDownList1").options;
var div = document.getElementById("div");
for(var i = 0 ; i<items.length ;i++){
var rdo = document.createElement("input");
rdo.type="radio";
rdo.name="uName";
rdo.value = items[i].value;
var lab = document.createElement("span");
lab.innerHTML=items[i].value;
div.insertBefore(lab, div.firstChild);
div.insertBefore(rdo, div.firstChild);
}
div.removeChild(document.getElementById("DropDownList1"));//你的任务完成了 ，你消失吧。
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div">
<asp:DropDownList ID="DropDownList1" runat="server" BackColor="White" Width="80px">
<asp:ListItem Value="张三"></asp:ListItem>
<asp:ListItem Value="李四"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="OK" OnClientClick="return t();" />
</div>
</form>
</body>
</html>
这样也差不多 。
你我他 2011-05-29
- 打赏
- 举报
在页面上写上 单选 设置隐藏 不就好了 ，当点击 是 显示 、、
ZhangNan20100811 2011-05-29
- 打赏
- 举报
能不能麻烦你只用JS实现下功能，谢谢
zell419 2011-05-29
- 打赏
- 举报
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script>
<script type="text/javascript">
var t = function(){
$("#DropDownList1 option").each(function(){
$("div:first").append("<input type=\"radio\" name=\"uName\" value=\""+$(this).val()+"\" />"+$(this).val()+"");
});
$("#DropDownList1").remove();//你的任务完成了 ，你消失吧。
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server" BackColor="White" Width="80px">
<asp:ListItem Value="张三"></asp:ListItem>
<asp:ListItem Value="李四"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="OK" OnClientClick="return t();" />
</div>
</form>
</body>
</html>
这样行么 ？
