JS——设置select默认值，及隐藏下拉框选项

最新推荐文章于 2025-03-21 10:00:00 发布

Lazyinit

最新推荐文章于 2025-03-21 10:00:00 发布

阅读量1.1w

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Lazyinit/article/details/90703282

版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何使用JavaScript来设置select元素的默认值，并展示了如何通过hide和show方法来控制下拉框选项的可见性。示例代码中演示了绑定level下拉框点击事件并实现选项的隐藏与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现功能大概是这样：（页面有点槽，该引的都没引，将就看吧.........）

先说默认值

这是页面选框

<td>@*<input type="text" name="level">*@ 
<select name="level" id="level">
		<option value="">——请选择等级——</option>
		<option value="优秀">优秀</option>
		<option value="合格">合格</option>
		<option value="不合格">不合格</option>
</select>
</td>
<td><select name="lowest" id="lowest">
		<option value="">——请选择最低分——</option>
		<option value="0.0">>=0</option>
		<option value="1.0">>=1</option>
		<option value="2.0">>=2</option>
		<option value="3.0">>=3</option>
		<option value="4.0">>=4</option>
		<option value="5.0">>=5</option>
		<option value="6.0">>=6</option>
		<option value="7.0">>=7</option>
		<option value="8.0">>=8</option>
		<option value="9.0">>=9</option> @*
		<option value="10.0">>=10</option>*@
</select></td>
<td><select name="highest" id="highest">
		<option value="">——请选择最高分——</option>
		<option value="1.0">< 1</option>
		<option value="2.0">< 2</option>
		<option value="3.0">< 3</option>
		<option value="4.0">< 4</option>
		<option value="5.0">< 5</option>
		<option value="6.0">< 6</option>
		<option value="7.0">< 7</option>
		<option value="8.0">< 8</option>
		<option value="9.0">< 9</option>
		<option value="10.0"><=10</option>
</select></td>

需求如下：

js代码如下：

先绑定level下拉框的点击事件

再用hide，show 方法设置隐藏，显示

$('#highest').hide();

$('#highest').show();

window.onload = function() {
		$('#lowest-th').hide();
		$('#lowest').hide();
		$('#highest-th').hide();
		$('#highest').hide();
		//绑定点击事件
	    $("#level").change(function() {
				$('#lowest-th').show();
				$('#lowest').show();
				$('#highest-th').show();
				$('#highest').show();
				var level = $(this).children('option:selected').val();
				var lowests = document.getElementById("lowest");
				var highests = document.getElementById("highest");
				//每次点击level下拉框，另外两个都置为空
				document.getElementsByName("lowest")[0].value="";
				document.getElementsByName("highest")[0].value="";
				//判断level选型，隐藏显示选型
				if (level == "优秀") {
					for (i = 0; i < lowests.length; i++) {
						lowests[i].style = 'display:block';
						if (!(lowests[i].value >= 7))
							lowests[i].style = 'display:none';
					}
				}  else if(level == null || level==""){
					$('#lowest-th').hide();
					$('#lowest').hide();
					$('#highest-th').hide();
					$('#highest').hide();
				}
				$('#lowest').trigger("chosen:updated");
			})
		}