2. 程式人生 > >js實現點擊下拉框選中對應的div

js實現點擊下拉框選中對應的div

阿新 • • 發佈：2017-09-01
ted bsp tel 範圍 selected onchange 大學 left nbsp

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js實現點擊下拉框選中對應的div</title> <style type="text/css"> div{display:none;} </style> </head> <body> <select name="select1" id="select1"
> <option name="option1" id="option1" value="value1">11111111</option> <option name="option2" id="option2" value="value2">22222222</option> <option name="option3" id="option3" value="value3">33333333</option> <option name="option4" id="option4"
 value="value4">44444444</option> <option name="option5" id="option5" value="value5">5555555</option> </select> <div id="div1">我以為哪位好心的弟兄姐妹來勸我悔改，不要在反對基督教的路上越走越遠。誰知是陌生人 群發的電郵，看完內容後，我大驚失色。</div> <div id="div2">結尾段，給出了聯絡方式。我統計了一下，包括遍布南京的十所高校的聯系方式，範圍之廣令人吃驚。（其中還包括了有軍工背景的高校：南京理工大學，南京航空航天大學。）</
div> <div id="div3">端的技術日漸更新，最近得空，花了一上午的時間，將前端常見的UI框架總結了一下，在開發的過程之中，有了這些，不斷能夠提高自己的工作效率，還可以在工作之余了解更多。希望大家喜歡</div> <div id="div4">ayui是一款采用自身模塊規範編寫的國產前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用</div> <div id="div5">從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。</div> </body> <script> var select = document.getElementById("select1"); select.onchange = function(){ var options = select.getElementsByTagName("option"); for(var i = 0; i < options.length; i++){ if(options[i].selected){ var divid = options[i].id.replace("option","div"); var divs = document.getElementsByTagName("div"); for(var j = 0; j < divs.length; j++){ if(divid == divs[j].id){ divs[j].style.display = "block"; }else{ divs[j].style.display = "none"; } } } } } </script> </html>

js實現點擊下拉框選中對應的div

相關推薦

js實現點擊下拉框選中對應的div

ted bsp tel 範圍 selected onchange 大學 left nbsp <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

Web前端：如何實現選擇select下拉框選中跳轉其他頁面

option chang 前端 實現 cati onchange 下拉框選中 b- class <select onchange="window.location=this.value;"><option value="a.html">用戶管理<

vue 點擊下拉框

width v-for 下拉 puts play item padding block posit data: { hide:false, zhi:"全部" }, <div class="item"> &

JS獲取select下拉框選中的value或者其name

text single nbsp -s 舉例 sta c-s jquer hid 舉例： <select class="js-example-basic-single js-states" style="width: 300px" name="hid" id="hi

angular.js 下拉框選中 根據後臺返回值

tro script rip pre 後臺 根據 length -o lec 前景，根據後臺返回值選中某個項 <!DOCTYPE html><html><head> <meta charset="utf-8"> &

js實現點擊評論進行顯示回復框

pen -c 進行 http his pan () 用戶評論 2.4 有人在群裏問如何在留言評論那裏點擊回復按鈕，下面就自動顯示一個回復框，他想要的效果如圖： 於是我隨意的寫了一段HTML，代碼如下： <!DOCTYPE HTML> <html lan

jquery及原生js獲取select下拉框選中的值示例

有一id=test的下拉框，怎麼拿到選中的那個值呢？本文將採用javascript原生的方法及jquery方法（前提是已經載入了jquery庫）來簡單實現下 現在有一id=test的下拉框，怎麼拿到選中的那個值呢？  分別使用javascript原生的方法和jquery方法,程式碼

JS實現點擊按鈕，下載文件

ajax client exc 關閉 ams end 問題： bmi for 今天在實現下載功能時，後臺接口測試完成後，前臺在調用時發現，因為系統是基於token的，又不想把token顯示在url中，後來找到了一篇文章，講解了如何通過構造form表單提交請求後端接口，實現文

js 判斷 undefined,單選 以及下拉框選中狀態

1 name = $(this).attr("title"); 2 if(typeof(name) == 'undefined'){ 3 alert(1); 4 } typeof 是個挺有意思的函式,有興趣的同志們可以搜搜看 網上一堆  

js操作下拉框選中的值

jsp: <select name="sortId"  id="sortId" class="xzk" onchange="setv(this);" style="width:200px">                                   

Javascript獲取select下拉框選中的的值

title nbsp span htm .text 下拉框 dex alert tle Javascript獲取select下拉框選中的的值 現在有一id=test的下拉框，怎麽拿到選中的那個值呢？ 分別使用javascript原生的方法和jquery方法 <sel

JS實現移動端下拉刷新更多分頁請求功能方法2.0

keyframes 發生 usb 第一次 odr back eight urn 返回頂部 本次2.0升級版為js實現移動端加載更多下拉刷新更多分頁請求功能方法（數據一次請求，前端分頁，適用於數據流量較少，數據量壓力小的頁面）同時新增loading組件，turnToTop組件

js實現點擊定位最頂端

func math body ret turn script doc speed top //------------------------------------點擊按鈕------------------------------------ <span onCl

vue.js實現點擊後動態添加class及刪除同級class

變色 點餐 tail itl 需要 name .cn 好用 get 最近使用vue需要實現一個點餐選擇商品規格的頁面，需要通過vue動態的給被點擊的元素添加class名字，使其變色，其他的刪除class。如圖： 開始在網上找了許多辦法發現不是太好用，最後找到一個發現還是不

jQuery簡單實現點擊文本框復制內容到剪貼板上的方法

ble sta sca principal ase clas app 回車 pbo //點擊文本框復制其內容到剪貼板上方法 function copyToClipboard(txt) { if (window.clipboardData) { window.cl

(swiper+dropload).js實現選項卡下拉加載分頁

result ssi blog 鎖定 fun host -a nts load 依賴庫:swiper.min.js+dropload.min.js 　　 //dropload var tabIndex = 0; var tab1LoadEnd = false; var t

原生js實現點擊復制功能

原生js實現點擊復制功能代碼： <input type="text"> <button>復制</button> <script> var input = document.getElementsByTagName(‘input‘)[0] var button =

vue.js 實現點擊展開收起動畫

tar 通過 blog ext mar document ML 收起 dea 最近公司項目加了個頁面，其中要求是這樣的，點擊對應列表，展開和收起， 其實就是顯示和隱藏內容部分；說來慚愧，我花了半天時間才搞出來（自黑一下~）， ，，接下來分享給大家，先上效果圖： .

Vue.js模擬百度下拉框

event NPU data resource prevent text eve set bubuko 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta c

原生 js 實現點擊按鈕復制文本

js實現 復制 ecc 標簽 type man com cti 瀏覽器 以前有個需求就是復制粘貼，今天了解一下一根復制的原生js實現的效果 html: <p id="text">1234</p><input type="text" id="in