1. 程式人生 > >HTML select下拉框總結

HTML select下拉框總結

 做web專案的時候經常要用到select下拉框,下面是我整理的一些常用知識點

<!-- select元素屬性:
	multiple="multiple" 多選
	disabled="disabled" 禁用 -->
	<select>
		<option>中國</option>
		<!-- option元素屬性:
		disabled="disabled" 禁用
		selected="selected" 選中-->
		<option id="op" value="America" >美國</option>
		<option>法國</option>
		<option>英國</option>
	</select>
	
	<button id="select-btn">測試select</button>
	
	<script type="text/javascript">
		$("#select-btn").bind('click',function(){
			//動態選中option,其值可以為selected,true,false,或者直接設定select元素的值來選中option
			//$("#op").attr('selected',true);
			$("select").val('America');
			//但是通過js程式碼選中option不會觸發change事件,這時要主動呼叫change事件函式
			$("select").trigger("change");
			/* 如果上面的值設為true或false,則selected屬性的值為selected,如果設為false,則為undefined,
			且通過滑鼠點選選中其他option不影響其值 */
			console.log($("#op").attr('selected'));
			//獲取option的值
			console.log($("#op").val());
			//獲取option的顯示文字
			console.log($("#op").text());
			//select框的值就是當前選中的option的值
			console.log('select框的值:'+$("select").val());
			
		});
		
		$("select").bind('change',function(){
			console.log('change事件:'+$("select").val());
		});
	</script>