正文
javascript列表,javascript列表排序
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
javascript怎么实现列表显示与折叠
一、首先定义一个JavaScript function，如下：
function puckerMenu(level) {
var levelLength = ('row' + level).length;
var toDo = '0';
for (var iCount = 0 ; iCount document.all.length; iCount++){
if ( document.all[iCount].id.indexOf('row' + level) -1 ( document.all[iCount].id.length levelLength)) {
if ( document.all('level' + level).src.indexOf('minus.gif') -1 ) {
document.all[iCount].style.display = 'none';
toDo = '1';
} else {
document.all[iCount].style.display = 'block';
toDo = '0';
}
}
}
if ( toDo == '1' ) {
document.all('level' + level).src = 'images/plus.gif';
} else {
document.all('level' + level).src = 'images/minus.gif';
}
}
二、然后在网页上定义一个div和一个ul，注意div中要包含一个id为level开头的image和一个onclick事件，ul中id要包含row，默认情况下是展开的，如果需要默认为闭合，则要在ul中加入style="display:none"
例子如下：
body
divstyle="CURSOR: hand"
onclick="puckerMenu('1');"IMGid=level1
src="images/minus.gif"public class DataAccess/div
ulid=row1
li private string connString;
divstyle="CURSOR: hand"
onclick="puckerMenu('2');"IMGid=level2
src="images /plus.gif"protected DbConnection OpenConnection()/div
ulid=row2style="display:none"{...}/ul
li
Other
/ul
/body
相关问答
Q1: js怎么添加一个下拉列表的值
javascript添加一个下拉列表项的方法：创建一个新的option节点，然后添加到目标select对象中去，关键代码如下：
1、var objSelect = document.getElementById(select_id)。
2、var new_opt = new Option(objItemText, objItemValue)。
3、objSelect.options.add(new_opt)。
实例演示如下：
1、HTML结构，包括一个select项，含有三个options。另外，设置input和button,通过自由父子，实现给select增加自定义option。
此时的显示效果如下，其中option中有三项。
2、JS的函数设计如下：
现有的options如下：
3、在页面上输入新的数据，点击添加。
此时的select效果显示如下，自由添加功能实现。
Q2: javascript 如何创建一个list
很简单的一个使用：点击菜单，能够显示下面的或者不显示
1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容
用到的是 overflow：hidden 和 overflow="visible"这两个属性 在点击的function中，设置属性应该node.style.overflow="visible";当然设置tr的高度也是很重要的，要恰好让其他的选项隐蔽。
2，采用同样的技术，多加几个，但是就是传参数比较麻烦，采用this传参很常用
具体代码如下。
!DOCTYPE html
html
head
!-- 1，主要目的：： 展现的是的一个菜单项，然后点击一下，隐藏，点一下，弹出下面的内容
用到的是 overflow：hidden 和 overflow="visible"这两个属性 在点击的function中，设置属性应该
node.style.overflow="visible";
2，采用同样的技术，多加几个，但是就是传参数比较麻烦
--
titlelist.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
Q3: 用javascript怎么取下拉列表的值
对于单选下拉列表，value属性可以直接获取其选中项的value值。
下面实例演示——单击按钮获取下拉列表选中项的value值：
1、HTML结构
select id="test"
option value="1"option-1/option
option value="2"option-2/option
option value="3"option-3/option
option value="4"option-4/option
/select br
input type='button' value='获取选中项' onClick="fun()"/
2、javascript代码
function fun(){
obj = document.getElementById("test");
alert(obj.value);
}
3、效果演示
Q4: javascript获取下拉列表框当中的文本值示例代码
近日碰到一个问题，就是需要将用户点击下拉列表当中某个选项后，将其所选的内容保存起来，例如下面的HTML代码：
复制代码
代码如下:
select
onchange="isSelected(this.value);"
id="city"
option
value="1"北京/option
option
value="2"
上海/option
option
value="2"
广州/option
/select
也就是说当用户选择“上海”这一列时，需要将“上海”这个名称保存起来。其实方法很简单。看下面javascript代码：
复制代码
代码如下:
function
isSelected(value)
{
var
cityName;
var
city
=
document.getElementById("city");
//获取选中的城市名称
for(i=0;icity.length;i++){
if(city[i].selected==true){
cityName
=
city[i].innerText;
//关键点
alert("cityName:"
+
cityName);
}
}
也可以这么做：
复制代码
代码如下:
function
isSelected(value)
{
var
city
=
document.getElementById("city");
alert(city.options[city.selectedIndex].innerText);
}
大致解释一下，首先在HTML页面上有一个下拉框，并为此下拉框定了一个“city”的id，并为其绑定了一个onchange事件，通过此事件调用javascript函数。
在javascript函数当中，通过domcument对象获取当前下拉框的节点元素，由于节点的值并非只有一个，所以我们可以通过循环节点来得到每个选项的值。在循环的时候通过判断当前选项是否选中，如果选中则使用city[i].innerText
方式获取当前所选中的文本值。当然如果需要获取选项值，只需如此即可：city[i].value.
至此，通过以上方法在IE下已能达到所要的结果。但是，在FIREFOX下测试时，发现此法不起作用，最后通过查阅资料发现另外一个方法。将city[i].innerText
改为
city[i].text即可。这种方法对IE及FIXEFOX都适用！
