JS案例之SELECT标签

最新推荐文章于 2023-07-10 10:23:57 发布

原创最新推荐文章于 2023-07-10 10:23:57 发布 · 510 阅读

0 ·

CC 4.0 BY-SA版权

JS案例专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在页面加载时使HTML SELECT标签默认为空，并演示了两种实现方法：通过JavaScript设置selectedIndex为-1，以及利用CSS隐藏默认选项。此外，还提供了获取SELECT标签选中值的代码示例。

◆ 载入页面SELECT标签默认为空

<body onload="load()">
    <select id="abc" >
        <option >1</option>
        <option >2</option>
        <option >3</option>
        <option >4</option> 
    </select>
</body>

<script>
	function load(){
	  var x = document.getElementById("abc"); 
	  x.selectedIndex = -1;
	} 
</script>

使用css方式：

<select id="abc" >
	<option selected="selected" disabled="disabled"  style='display: none' value=''></option>
    <option >1</option>      
    <option >2</option>          
    <option >3</option>          
    <option >4</option>       
</select>

◆ 获取select标签选中的值：

var obj = document.getElementByIdx_x(”testSelect”); //定位id
var index = obj.selectedIndex; // 选中索引
var text = obj.options[index].text; // 选中文本
var value = obj.options[index].value; // 选中值