js_jQuery【下拉菜单联动dom操作】
生活随笔
收集整理的這篇文章主要介紹了
js_jQuery【下拉菜单联动dom操作】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
下拉菜單聯動dom操作案例
?源碼：
<!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>Document</title></head><body><select id="xueli" onchange="updateInfo()"><option value="A">大專</option><option value="B">本科</option><option value="C">研究生</option></select><select id="xuexiao"><option value="A">A學院</option><option value="B">B學院</option><option value="C">C學院</option></select><script type="text/javascript" src="https://code.jquery.com/jquery-3.4.0.min.js"></script><script>function updateInfo() {var xueli = $("#xueli").val();var xuexiao = $("#xuexiao");xuexiao.html("");var str = "";if (xueli == "A") {str = "<option value='A'>A學院</option>";str += "<option value='B'>B學院</option>";str += "<option value='C'>C學院</option>";} else if (xueli == "B") {str = "<option value='A'>A大學</option>";str += "<option value='B'>B大學</option>";str += "<option value='C'>C大學</option>";} else if (xueli == "C") {str = "<option value='A'>A研究所</option>";str += "<option value='B'>B研究所</option>";str += "<option value='C'>C研究所</option>";}xuexiao.append(str);}</script> </body></html>注意：其它類似的內容無論是多少級聯動，都是類似的。
總結
以上是生活随笔為你收集整理的js_jQuery【下拉菜单联动dom操作】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js_jQuery综合机试练习题
- 下一篇： 好插件·用户造【CSND超好用插件】·【