jquery之new Option(）二联动、三联动、四联动菜单（part1）

最新推荐文章于 2021-04-01 19:25:12 发布

那是遇知吧

最新推荐文章于 2021-04-01 19:25:12 发布

阅读量1.6k

点赞数 3

分类专栏： Jquery

本文链接：https://blog.csdn.net/weixin_41406727/article/details/88392987

版权

今天看了一個很有意思的屬性，在日常中也可以用到，也有很多人寫過，自己也來總結一下。

基本內容解說：

1:add() 方法用于向 <select> 添加一个 <option> 元素。

2:new Option() 创建一个option标签

3:Two.options.add(twoop, null);最後輸出要這樣寫才正確喲！

4：new Option(i,i)//第一個i是輸出的option值，第二個是option的value值;

1：二联动

<!DOCTYPE html>

<html>



<head>

<script src="js/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

var arrnum = new Array();

arrnum['美女'] = ['范冰冰', '楊冪', '唐嫣', '迪麗熱巴'];

arrnum['帥哥'] = ['鹿晗', '吳亦凡', '李易峰', '朱一龍'];

arrnum['醜女'] = ['鳳姐', '宛如', '翠花', '小丑女'];

function oneobj() {

var One = document.getElementById("one");

for (var i in arrnum) {

var op = new Option(i, i);

One.options.add(op, null);

};

};

function twoobj() {

var onevalue = document.getElementById("one").value;

var Two = document.getElementById("two");

Two.options.length = 0;//清除二級菜單裡的值，避免重複

for (var i in arrnum) {

if (i == onevalue) {

for (var j in arrnum[i]) {

var twoop = new Option(arrnum[i][j], arrnum[i][j]);

Two.options.add(twoop, null);

}

}

}

};

window.onload = function () {

oneobj();

};

</script>

<head>

<body>

<form action="">

<select id="one" style="width:100px;" onchange="twoobj()">

<option value="">美醜分類</option>

</select>

<select id="two" style="width:100px;">

<option value="">美醜名稱</option>

</select>

</form>

</body>

</html>

效果如下：

點擊美女前：

點擊美女后：

自動彈出相應的二聯菜單。

在這裡分享另一種差不多的方法：

謝謝爱吃苹果的牛顿：https://blog.csdn.net/qq_16014497/article/details/79467945

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <base href="<%=basePath%>">

最低0.47元/天解锁文章

那是遇知吧

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery之new Option(）二联动、三联动、四联动菜单（part1）

今天看了一個很有意思的屬性，在日常中也可以用到，也有很多人寫過，自己也來總結一下。基本內容解說：1:add() 方法用于向 <select> 添加一个 <option> 元素。2:new Option() 创建一个option标签3:Two.options.add(twoop, null);最後輸出要這樣寫才正確喲！4：new Option(i,i...
复制链接

扫一扫