Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 欧美中文在线视频,欧美性精品不卡在线观看,久久久久久国产a免费观看黄色大片 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務(wù)商
          
				
          電腦端+手機端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          JavaScript 二級地址聯(lián)動
          
        
           
          
	
	
          
		JavaScript 二級地址聯(lián)動
          
                        
          <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>網(wǎng)頁標題</title>
<meta name="keywords" content="關(guān)鍵字列表" />
<meta name="description" content="網(wǎng)頁描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css"></style>
<script type="text/javascript">
var arr_pro=["請選擇省/城市","北京市","上海市","天津市","重慶市","深圳市","廣東省","河南省"];
var arr_city=[
["請選擇城市/地區(qū)"],
["東城區(qū)","西城區(qū)","朝陽區(qū)","宣武區(qū)","昌平區(qū)","大興區(qū)","豐臺區(qū)","海淀區(qū)"],
['寶山區(qū)','長寧區(qū)','豐賢區(qū)', '虹口區(qū)','黃浦區(qū)','青浦區(qū)','南匯區(qū)','徐匯區(qū)','盧灣區(qū)'],
['和平區(qū)', '河西區(qū)', '南開區(qū)', '河北區(qū)', '河東區(qū)', '紅橋區(qū)', '塘古區(qū)', '開發(fā)區(qū)'],
['俞中區(qū)', '南岸區(qū)', '江北區(qū)', '沙坪壩區(qū)', '九龍坡區(qū)', '渝北區(qū)', '大渡口區(qū)', '北碚區(qū)'],
['福田區(qū)', '羅湖區(qū)', '鹽田區(qū)', '寶安區(qū)', '龍崗區(qū)', '南山區(qū)', '深圳周邊'],
['廣州市','惠州市','汕頭市','珠海市','佛山市','中山市','東莞市'],
['鄭州市']
];

//分析思路
//1.當頁面加載完成后
//2.獲取id=pro和id=city這兩個對象
//3.給id=pro這個對象 增加長度 它的長度是由arr_pro這個數(shù)組的長度所決定的
//4.將arr_pro數(shù)組中的每一個元素寫入對應(yīng)的option中
//5.給id=pro這個對象綁定onchange事件
//6.獲取到選中的下標
//7.去arr_city中找對應(yīng)二維數(shù)組的長度 然后將它的長度賦值給id=city這個對象
//8.將對應(yīng)的二維數(shù)組中的每一個元素寫入到option中
//1.當頁面加載完成后
window.onload=function(){
//2.獲取id=pro和id=city這兩個對象
var pro_obj=document.getElementById("pro");
var city_obj=document.getElementById("city");
//3.給id=pro這個對象 增加長度
var arr_length=pro_obj.options.length=arr_pro.length;
//循環(huán)arr_pro這個數(shù)組 然后將這個數(shù)組中的每一個數(shù)組元素寫入對應(yīng)的option中
for(var i=0;i<arr_length;i++){
pro_obj.options[i].text=arr_pro[i];
}

//5.給id=pro這個對象綁定onchange事件
pro_obj.onchange=function(){
var selIndex=this.selectedIndex; //獲取選中的下標
//給city_obj這個對象添加arr_city這個數(shù)組對應(yīng)的長度
var city_length=city_obj.options.length=arr_city[selIndex].length;
//循環(huán)arr_city這個數(shù)組 然后將對應(yīng)的每個數(shù)組元素寫入到對應(yīng)的option中
for(var i=0;i<city_length;i++){
city_obj.options[i].text=arr_city[selIndex][i];

}
}
}

</script>
</head>
<body>
<select id="pro"></select>
<select id="city">
<!--為城區(qū)下拉列表設(shè)置默認選項-->
<option>請選擇城市/地區(qū)</option>
</select>
</body>
</html>

          文介紹如何實現(xiàn)select下拉選項的聯(lián)動效果，用戶及部門信息一般是通過后端讀取數(shù)據(jù)庫返回的，用戶一般都會屬于某個部門，它們之間大多通過某個相同的ID進行關(guān)聯(lián)，那么想當然地在前端選擇用戶時自然希望能夠自動帶出部門信息，避免多余的用戶操作。


          以上面的gif展示為例，要實現(xiàn)申請人和申請人部門的聯(lián)動，必須要找到它們之間的關(guān)聯(lián)，這里就是部門ID。
          申請人信息中一定帶有部門ID信息，我們可以在前端展現(xiàn)時，將申請人的部門ID信息寫入到option中的data屬性中，然后在js中跟蹤申請人的選擇改變事件，就可以獲取到選中option的data值。
          接著再遍歷申請人部門的option元素，只要option的value值（value為申請人部門的ID）和選中申請人的部門ID相同，就設(shè)置該option為選中狀態(tài)，這樣就實現(xiàn)了自動聯(lián)動申請人部門。
          <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript實現(xiàn)select聯(lián)動</title>

</head>

<body>

    <h1>JavaScript實現(xiàn)select聯(lián)動</h1>

    <div>

        <label for="user_name" class="form-label">申請人</label>

        <!-- onchange跟蹤select的變化事件，并將元素id傳給update_user_dept -->

        <select id="user_name" name="user_name" onchange="update_user_dept(this.id)">

            <option value="">請選擇...</option>

            <!-- option中的data值記錄申請人部門ID -->

              <option value="張三" data="001">張三</option>

              <option value="李四" data="002">李四</option>

              <option value="王二麻子" data="003">王二麻子</option>

        </select>

  

        <label for="user_dept" class="form-label">申請人部門</label>

        <select id="user_dept" name="user_dept">

            <option value="">請選擇...</option>

                <option value="002">財務(wù)部</option>

                <option value="001">人力部</option>

                <option value="003">工程部</option>

        </select>

    </div>

    <script src="./demo.js"></script>

</body>

</html>
          在demo.js定義select改變事件的處理方法update_user_dept
          果您覺得該文章對您有幫助，讓更多人受用，請關(guān)注“鍵盤碼農(nóng)”，轉(zhuǎn)發(fā)該文章。謝謝您的支持！
          今天跟大家寫了一份js的聯(lián)動全選的源碼，代碼少，清晰易懂。
          效果是這樣的：
          點擊全選下面的就會被全部全選，或者下面的被一一選擇，全選按鈕也會被選中。運用復選框來實現(xiàn)的聯(lián)動全選的功能。
          點擊上面的復選框就會被全選
          Javascript：聯(lián)動全選
          當下放的復選框沒有被全選，最上面的全選按鈕未被選中
          復選框聯(lián)動全選js代碼實現(xiàn)：
          <!DOCTYPE html>
          <html>
          <head>
          <title></title>
          <meta charset="utf-8">
          <script type="text/javascript">
          window.onload=function ()
          {
          var oBtn1=document.getElementById('btn1');
          var oBox=document.getElementById('box');
          var oInputs=oBox.getElementsByTagName('input');
          oBtn1.onclick=function ()
          {
          if (oBtn1.checked==true) {
          for (var i=0; i < oInputs.length; i++) {
          oInputs[i].checked=true;
          } 
          } else {
          for (var i=0; i < oInputs.length; i++) {
          oInputs[i].checked=false;
          }
          }
          }
          //點擊每一個input框
          for (var i=0; i < oInputs.length; i++) {
          oInputs[i].onclick=function ()
          {
          var n=0;
          for (var i=0; i < oInputs.length; i++) {
          if (oInputs[i].checked==true) {
          n++;
          }
          }
          if (n==oInputs.length) {
          oBtn1.checked=true;
          } else {
          oBtn1.checked=false;
          }
          }
          }
          }
          </script>
          </head>
          <body>
          <h1>全選/全不選</h1>
          <input type="checkbox" id="btn1">
          <div id="box">
          <input type="checkbox" name="">
          <input type="checkbox" name="">
          <input type="checkbox" name="">
          <input type="checkbox" name="">
          </div>
          </body>
          </html>
          相對比較簡單，對于初學者應(yīng)該有很好的幫助！請關(guān)注鍵盤碼農(nóng)。后期繼續(xù)更新，如有什么看法請在下方評論。第一時間為您解答哦！
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
免费av一区二区三区|
久久精品动漫一区二区三区|
亚洲国产精品一区二区三区久久|
亚洲国产日韩一区高清在线|
成人在线视频一区|
性色av闺蜜一区二区三区|
久久久久成人精品一区二区
|
亚洲国产一区二区三区|
精品一区二区三区无码免费视频|
国产SUV精品一区二区88L|
亚洲AV无码一区二区三区网址|
亚洲一区二区三区精品视频|
亚洲狠狠久久综合一区77777|
中文字幕一精品亚洲无线一区|
一区二区三区在线看|
人妻内射一区二区在线视频|
无码人妻一区二区三区免费视频
|
亚洲av午夜精品一区二区三区|
国产欧美一区二区精品仙草咪|
亚洲综合激情五月色一区|
国产精品制服丝袜一区|
亚洲av乱码一区二区三区按摩|
亚洲中文字幕在线无码一区二区|
色欲综合一区二区三区|
日产精品久久久一区二区|
久久久久人妻精品一区蜜桃|
久久久久人妻一区二区三区|
日韩精品一区二区三区老鸭窝|
99久久精品午夜一区二区|
精品无码综合一区二区三区|
国产福利无码一区在线|
福利一区在线视频|
精品伦精品一区二区三区视频|
国产一区玩具在线观看|
亚洲天堂一区二区|
麻豆精品人妻一区二区三区蜜桃
|
日韩成人无码一区二区三区|
国产欧美一区二区精品仙草咪
|
亚洲爆乳精品无码一区二区三区|
亚洲一区二区在线视频|
午夜性色一区二区三区免费不卡视频|