select box

【Foreword】

   The drop-down selection is often used on the website. Here is a summary, so that it can be included in the courseware.

 

【main body】

Common settings: The drop-down box has a preference by default, and there are two common effects

1. The drop-down button control is grayed out and cannot be clicked, and the options in the drop-down list cannot be displayed at all

2. The drop-down button can be clicked, but the display option is gray, and there is no "selected" effect when clicked

 

The first: control through jquery

 

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

The second: control through the dialed attribute

 

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

 

There is also the judgment of the value of the drop-down option at the time of submission, which can be judged in 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('Your choice is '+value+'level subject')
			}else{
				alert('Please select a subject')
			}
		})
	})
</script>

 

 

 

 

.