JQuery根据下拉列表的值动态修改页面内容

 1:使用dom操作

      select下拉列表,提供了select.options[index]来获取下拉列表的值,我们可以通过

select.options[select.Indexed]来获取下拉列表中选中的值。

    

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>testselect</title>
	
		
	</head>
	<body>
     
       	 <select name="shengfen" id="myselect">
       	 	<option>福建</option>
       	 	<option>广东</option>
       	 	<option>辽宁</option>
       	 	<option>黑龙江</option>
       	 	<option>云南</option>
       	 </select>
       
       <input type="button" value="第一个" onclick="change(curTarget.options[0])"/>
       <input type="button" value="选中的" onclick="change(curTarget.options[curTarget.selectedIndex])"/>
       <input type="button" value="上一个" onclick="change(curTarget.options[curTarget.selectedIndex-1])"/>
       <input type="button" value="下一个" onclick="change(curTarget.options[curTarget.selectedIndex+1])"/>
       
       <script type="text/javascript">
          var curTarget = document.getElementById("myselect");
       	  function change(target)
       	  {
       	  	  alert(target.text);
       	  }
       </script>
	</body>
</html>


 

 

 2:使用jquery时候,我们获取下拉列表选中的值只需要调用对象.value()就可以获取了。      

$(document).ready(function()  
{
    var x = $("select");
    x.change(
    	function()
    	{
    		//获取id为select的下拉框选中的值
    	    var a = $("#test").val();
    	   
    	    var div = $("div");
    		if( a =="福建")
    		{
    		    div[0].innerHTML="泉州,厦门,福州,漳州";
    		}
    		else if( a =="广东")
    		{
    		    div[0].innerHTML=" 深圳,广州,珠海,汕头,中山,东莞";
    		}
    		else if( a =="浙江")
    		{
    		    div[0].innerHTML="杭州,绍兴";
    		}
    	}
    );
});
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <script src="../jquery/jquery-1.7.2.js">
	    </script>
	    
	    
	    <script src="../jquery/select.js">
	    </script>
	</head>
	<body>
		
       <select id="test">
            <option value="福建">福建</option>
            <option value="广东" selected="selected">广东</option>
            <option value="浙江">浙江</option>
       </select> 
       <div>
       	   深圳,广州,珠海,汕头,中山,东莞
       </div>
	</body>
</html>




你可能感兴趣的:(html,jquery,function,div)