【前言】
下拉选择是网站经常用的,这里总结下,做到课件里
【主体】
常见的设置:下拉框默认有个首选项,常见的有两种效果
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>
.