首先祝您中秋节快乐!
我想实现:网页上有可同时输入也可下拉列表选择的框,还有Save和Delete按钮各一个,欲在文本框中输入一串字符后,点击Save按钮,这串字符出现在下拉列表中,选择下拉列表中某项后,点击Delete把它删除掉。
我是个新手,有谁做过类似的东西,麻烦您传一下代码,我研究研究。谢谢您!
我想实现:网页上有可同时输入也可下拉列表选择的框,还有Save和Delete按钮各一个,欲在文本框中输入一串字符后,点击Save按钮,这串字符出现在下拉列表中,选择下拉列表中某项后,点击Delete把它删除掉。
我是个新手,有谁做过类似的东西,麻烦您传一下代码,我研究研究。谢谢您!
var opt=document.getElementById('xxx');
opt.options[opt.options.length]=new Option('xxx','xxx');删除:for(var i=0;i<opt.options.length;i++){
if(opt.options[i].value==opt.value)opt.options.remove(i);
}
------------
//添加选项
function Save()
{
var select = document.getElementById("s1"); //对<select>的引用
var val = document.getElementById("opt").value;//要添加到选项中的字符串
if (val == "")
{
alert("请输入字符");
return;
}
//添加
select.options[select.options.length] = new Option(val, val);
document.getElementById("opt").value = "";
}//删除选项
function Delete()
{
var select = document.getElementById("s1"); //<select>
if (select.selectedIndex > -1)
select.options[select.selectedIndex] = null; //删除
}
html:
---------------
<select id="s1"></select><br />
<input type="text" id="opt" />
<input type="button" id="save" value="Save" onclick="Save()" />
<input type="button" id="delete" value="Delete" onclick="Delete()" />
在你们的基础上实现了效果,我做了修改,结果是这样的。下面是源代码:
然而,我想在输入字符串Save前想提醒一下下拉列表框中是否覆盖,在我的代码中for 循环的部分,但是实现不了,请指点一二。
<html>
<head>
<title>测试下拉表单</title>
<script language="JavaScript">
function Save()
{
var select = document.getElementById("s1"); //对<select>的引用
var val = document.getElementById("opt").value;//要添加到选项中的字符串
var length=select.options.length; //下拉选项的长度
if (val == "")
{ //得判断一下下拉列表中是否存在
alert("Please input a profile name.");
return;
}
//查找下拉列表中是否存在相同的配置文件
for(flag="0";flag<length;flag++)
{
if(val==select.options[flag])
{
if(!confirm("Could you cover the existing profile?")) return;
}
}
//添加
select.options[length] = new Option(val, val);
document.getElementById("opt").value = "";
}
//删除选项
function Delete()
{
opt.value="";
var select = document.getElementById("s1"); //<select>
var val=select.value; //要删除的字符串
if (val == "")
{
alert("Please select a profile name.");
return;
}
if (val == "Default")
{
alert("The default profile can not be deleted!");
return;
}
if (select.selectedIndex > -1)
select.options[select.selectedIndex] = null;//删除 }
</script>
</head>
<body> <input id="opt" type=text name=save style="width:200px;"><span style="width:18px;">
<select id="s1" style="margin-left:-100px;width:118px;" onchange=opt.value=this.value>
<option value="" selected>--Please Select--</option>
<option value=Default>Default
<select>
</span>
<input type="submit" id="save" value="Save" onclick="Save()" />
<input type="submit" id="delete" value="Delete" onclick="Delete()" /></body>
</html>
for(flag=0;flag<length;flag++)
{
if(val==select.options[flag].value)
{
confirm("Could you cover the existing profile?");
document.getElementById("opt").value = "";
return;
}
}