javascript如何创建list?

javascript如何创建list?,第1张

很简单的一个使用:点击菜单,能够显示下面的或者不显示

1,主要目的:: 展现的是的一个菜单项,然后点击一下,隐藏,点一下,d出下面的内容

用到的是 overflow:hidden    和  overflow="visible"这两个属性 在点击的function中,设置属性应该node.style.overflow="visible"当然设置tr的高度也是很重要的,要恰好让其他的选项隐蔽。

2,采用同样的技术,多加几个,但是就是传参数比较麻烦,采用this传参很常用

具体代码如下。

<!DOCTYPE html>

<html>

<head>

<!-- 1,主要目的:: 展现的是的一个菜单项,然后点击一下,隐藏,点一下,d出下面的内容

用到的是 overflow:hidden    和  overflow="visible"这两个属性 在点击的function中,设置属性应该

node.style.overflow="visible"

2,采用同样的技术,多加几个,但是就是传参数比较麻烦

-->

<title>list.html</title>

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<style type="text/css">

dl{

height:18px/*优先级问题,必须要写*/

overflow:hidden

}

dd{

margin:0px

padding:0px

}

.close{

height:18px/*优先级问题,必须要写*/

overflow:hidden

}

.open{

height:80px

overflow:visible

background-color:#ff8000

}

</style>

<script type="text/javascript">

function click2(node1){

//                      alert("aa"+node.nodeName)// td

var nodes=node1.parentNode

//                      alert(nodes.nodeName)

//  alert("aa"+nodes.className)

//※※通过传进的对象 判断采用哪种css模式

if(nodes.className=="open"){

nodes.className="close"

}else{

nodes.className="open"

}

}

</script>

</head>

<body>

<!--层次列表-->

<!--当很多时候采用传参就很麻烦,每个都需要去传参

<dl>

<dt onclick="click1(0)">菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click1(1)">菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click1(2)">菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

-->

<br/>

<br/>

<hr/>

<!--<dl class="close">先手动采用css测试,可以然后采用编程使用-->

<dl>

<dt onclick="click2(this)">1菜单条1</dt>

<dd>菜单1</dd>

<dd>菜单2</dd>

<dd>菜单3</dd>

<dd>菜单4</dd>

</dl>

<dl>

<dt onclick="click2(this)">2菜单条2</dt>

<dd>菜单11</dd>

<dd>菜单22</dd>

<dd>菜单33</dd>

<dd>菜单44</dd>

</dl>

<dl>

<dt onclick="click2(this)">3菜单条3</dt>

<dd>菜单12</dd>

<dd>菜单23</dd>

<dd>菜单34</dd>

<dd>菜单45</dd>

</dl>

</body>

</html>

Struts2的select标签,如果你是正确的取值的话,那最终生成的页面也就是如下:

<select id="">

    <option></option>

    <option></option>

</select> // 如果你能在生成 select 上添加一个 id,那么js取数据就如下

<script type="text/javascript">

    // 假设你的id是sel,那么下面的options就是你的所有数据对象

    var options = document.getElementById("sel").options

    // 然后你要获取第一条数据的value值,你就使用

    alert(options[0].value)

    // 你要获取第一条数据的text,你就使用

    alert(options[0].innerHTML)

    // 如果要获取第N条,就用 options[N-1]

    // 要循环,也可以使用

    for (var i=0i<options.lengthi++){

        var val = options[i].value

    }

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11794858.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存