【JS】下拉框的基本操作

最新推荐文章于 2023-10-07 15:03:47 发布

AlbertHongXS

最新推荐文章于 2023-10-07 15:03:47 发布

阅读量501

点赞数

分类专栏： js 初学PHP 文章标签：下拉框

本文链接：https://blog.csdn.net/hongxiaoshuang/article/details/53314097

版权

初学PHP 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<select style="float:left;"name="scolor" id="scolor">
<option value="0">**请选择**</option>
<option value="red">**红色**</option>
<option value="green">**绿色**</option>
<option value="blue">**蓝色**</option>
</select>
<div style="float:left;">
<ul >
<li type="1"><input type="button" value="添加一个选择" οnclick="Test1();" /></li><br />
<li type="1"><input type="button" value="获取选中项的索引" οnclick="Test2();" /></li><br />
<li type="1"><input type="button" value="获取选中项的文本" οnclick="Test3();" /></li><br />
<li type="1"><input type="button" value="获取选中项的值" οnclick="Test4();" /></li><br />
<li type="1"><input type="button" value="删除选中项" οnclick="Test5();" /></li><br />
<li type="1"><input type="button" value="让指定的项被选中" οnclick="Test6();" /></li><br />
<li type="1"><input type="button" value="修改选中项" οnclick="Test7();" /></li><br />
<li type="1"><input type="button" value="清空项" οnclick="Test8();" /></li><br />
<li type="1"><input type="button" value="替换" οnclick="Test9();" /></li><br />
</ul>
</div>

</body>
<script language="javascript" type="text/javascript">
function Test1(){
var scolor=document.getElementById("scolor");
scolor.options.add(new Option("**黄色**"));//选项的文本和值是一样
//第二种方式
scolor.options.add(new Option("**橙色**","orange"));//添加指定文本和值的选项

}

function Test2(){
var scolor=document.getElementById("scolor");
alert(scolor.selectedIndex);
}

function Test3(){
var scolor=document.getElementById("scolor");
alert(scolor.options[scolor.selectedIndex].text);
}

function Test4(){
var scolor=document.getElementById("scolor");
//alert(scolor.options[scolor.selectedIndex].value);
alert(scolor.value);
}

function Test5(){
var scolor=document.getElementById("scolor");
scolor.options.remove(scolor.selectedIndex);
}

function Test6(){
var scolor=document.getElementById("scolor");
//scolor.selectedIndex=2;//控制索引
scolor.value="green";//控制值
}

function Test7(){
var scolor=document.getElementById("scolor");
scolor.options[scolor.selectedIndex]=new Option("**白色**","white");
}

function Test8(){
var scolor=document.getElementById("scolor");
/*
for(var i=0;i<scolor.options.length;i++){
scolor.options.remove(i);
}
remove只能删除一次，无法删除多个，使用循环也不行
*/
scolor.options.length=0;
}

//替换
function Test9(i){
var scolor=document.getElementById("scolor");
i=scolor.selectedIndex;
tem=scolor.options[i];
scolor.options.add(new Option(tem.text))
scolor.options[i]=new Option("**黑色**","black");

}
</script>

</html>

AlbertHongXS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【JS】下拉框的基本操作

无标题文档**请选择****红色****绿色****蓝色**function Test1(){var scolor=document.getElementById("scolor");scolor.options.add(new Option("**黄色**"));//选项的文本和值
复制链接

扫一扫