select选择框

【前言】

   下拉选择是网站经常用的，这里总结下，做到课件里

 

【主体】

常见的设置：下拉框默认有个首选项，常见的有两种效果

1、下拉按钮控件变灰不可点，根本不能显示下拉列表中的选项

2、下拉按钮可以点，但是显示选项为灰色，点击无“选中”效果

 

第一种：通过jquery控制

 

 $("select").attr("disabled", "disabled");

第二种：通过diasbled属性控制

 

<option value="volvo" disabled="true">Volvo</option>

 

还有就是下拉选项的值在提交时的判断，这个在js里判断即可

科目：<select class="select-list">
	<option value="0">请选择</option>
	<option value="1">一级</option>
	<option value="2">二级</option>
	<option value="3">三级</option>
	<option value="4">四级</option>
</select>
<button class="btn">提交</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('.btn').on('click',function(){
			var text = $(".select-list").find("option:selected").text();
			var value = $(".select-list").find("option:selected").val();
			if (value != 0) {
				alert('您的选择是'+value+'级科目')
			}else{
				alert('请选择科目')
			}
		})
	})
</script>

 

 

 

 

.