1. 程式人生 > >關於HTML中select下拉框的取值問題

關於HTML中select下拉框的取值問題

<div>
	<select name="select-test" id="select-test">
		<option value="1" >yi</option>
		<option value="2" >er</option>
		<option value="3" >san</option>
		<option value="4" >si</option>
		<option value="5" >wu</option>
	</select>
	
	<button id="btn" name="btn" onclick="testSelect()">測試</button>
</div>

<script type="text/javascript">

	function testSelect(){
		var selectTest1 = $("#select-test").val();
		var selectTest2 = $("#select-test").html();
		var selectTest3 = $("#select-test").text();
		var selectTest4 = $("#select-test").find("option:selected").text();
		var selectTest5 = $("#select-test").find("option:selected").val();
		var selectTest6 = $("#select-test").find("option[value='1']").val();
		var selectTest7 = $("#select-test").find("option[value='1']").text();
		var selectTest8 = $("#select-test").find("option[text='yi']").val();
		var selectTest9 = $("#select-test").find("option[text='yi']").text();
		
		alert(...);
	}

</script>

從上到下,獲取到的值分別為:

option1:

1;

option2:

<option value="1" >yi</option>
<option value="2" >er</option>
<option value="3" >san</option>
<option value="4" >si</option>
<option value="5" >wu</option>;

option3:

yi

er

san

si

wu;

option4:

yi;

option5:

1;

option6:

1;

option7:

yi;

option8:

undefined;

option9:

空白;

結論:

1.獲取被選中的值:用第一個表示式;

2.獲取被選中的文字:用第四個表示式;