1. 程式人生 > >個人js學習例項-下拉選單onchange

個人js學習例項-下拉選單onchange

html:

<select name="" id="demo">
		<option value="01">吉祥01</option>
		<option value="02">吉祥02</option>
		<option value="03">吉祥03</option>
		<option value="04">吉祥04</option>
		<option value="05">吉祥05</option>
</select>

js:

<script>
		window.onload = function(){
			//獲取id為demo的selsction元素
			var demo = document.getElementById('demo');
			//下拉選單的改變時間是onchange
			demo.onchange = function(){
				//onchange觸發後執行的程式碼塊兒
				alert(this.value);

				//可以使用swich語句
				switch(this.value){
					//如果value的值是01執行語句1
					case "01":
							語句1;
					break;
					case "02":
							語句2;
					break;
					case "02":
							語句3;
					break;
					case "04":
							語句4;
					break;
					case "05":
							語句5;
					break;	
					//如果上述五個都不滿足條件,執行default預設語句,既語句6
					 default:
        				語句6;
				}

			}
		}
	</script>