本文目录
- 用javascript怎么取下拉列表的值
- 求助点击列表按钮打开列表内容javascript
- javascript如何同时设置两个轮动列表
- 用javascript实现一个可以展示更多列表的按钮比如说数据源中有21个列表，页面先显示3个列表，
- javascript列表隔行变色，加点击事件颜色改变
- JavaScript在一个页面中写一个简单的待办事项列表应用
- 要通过JavaScript获取列表单中指定元素的个数,通常使用什么属性
- javascript语句选中列表的某一项
- javascript如何创建list
用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、效果演示
求助点击列表按钮打开列表内容javascript
《!--创建一个按钮列表（class里面是bootstrap的样式，href是锚点这个要有）--》《div class="list-group" id="btns"》《b class="list-group-item active"》按钮列表《/b》《a href="#content" class="list-group-item"》btn1《/a》《a href="#content" class="list-group-item"》btn2《/a》《a href="#content" class="list-group-item"》btn3《/a》《a href="#content" class="list-group-item"》btn4《/a》《a href="#content" class="list-group-item"》btn5《/a》《/div》《!--创建内容列表。当点击btn1时候内容1显示其他内容隐藏--》《style media="screen"》li {display:none;}《/style》《div id="lis"》《ul》《li》内容1《/li》《li》内容2《/li》《li》内容3《/li》《li》内容《/li》《li》内容4《/li》《li》内容5《/li》《/ul》《/div》《!--（锚点一定要有）求助大神--》《script》let eles = document.getElementsByClassName(’list-group-item’);function hidn () {let lis = document.getElementsByTagName(’li’);for (let v of lis) {v.style.display = ’none’;}}for (let v of eles) {v.onclick = function () {hidn();let html = this.innerHTML;let number = html.match(/\d/g);let lis = document.getElementsByTagName(’li’);for(let value of lis) {let li_number = value.innerHTML.replace(/\W/g, ’’);if (li_number == number) {value.style.display = ’block’;}}}}《/script》
javascript如何同时设置两个轮动列表
这是一个简单的选项卡，用jquery方便，$("#xxk1").click(function(){ $(this).attr("class","class1").siblings("div").attr("class","class2") $("#table1").show(); $("#table2").hide();})$("#xxk2").click(function(){ $(this).attr("class","class1").siblings("div").attr("class","class2") $("#table2").show(); $("#table1").hide();})
用javascript实现一个可以展示更多列表的按钮比如说数据源中有21个列表，页面先显示3个列表，
《input type="button" value="显示+3" onclick="showmore(3);" /》《br /》《div style="width:200px;height:60px;line-height:20px;overflow:hidden;border:1px solid #ccc;" id="list"》1《br /》2《br /》3《br /》4《br /》5《br /》6《br /》7《br /》8《br /》9《br /》10《br /》11《br /》12《br /》13《br /》14《br /》15《br /》16《br /》17《br /》18《br /》19《br /》20《br /》21《/div》《script》function showmore(num){var max_height = 20*21;var current_height = parseInt(document.getElementById("list").style.height);if(current_height《max_height){document.getElementById("list").style.height = current_height + (num * 20);}}《/script》
javascript列表隔行变色，加点击事件颜色改变
《html》《head》《script》 window.onload=function() { var oLi=document.getElementsByTagName(’li’); var arr=; var str=’’; for(var i=0;i《oLi.length;i++) { oLi; oLi.onmouseover=function() { if(this.style.backgroundColor!=’black’)//判断当前色为黑色则不响应onmouseover { str=this.style.backgroundColor; this.style.backgroundColor=’gray’;} } oLi.onclick=function(){ window.onload();//首先还原其他行改变过的颜色 this.style.backgroundColor=’black’;//设置本行为黑色 } oLi.onmouseout=function() { if(this.style.backgroundColor!=’black’)//判断当前色为黑色则不响应onmouseout this.style.backgroundColor=str; } } }《/script》《/head》《body》《ul》 《li》《/li》 《li》《/li》 《li》《/li》 《li》《/li》 《li》《/li》 《li》《/li》 《li》《/li》 《li》《/li》 《li》《/li》 《li》《/li》《/body》《/html》
JavaScript在一个页面中写一个简单的待办事项列表应用
《input type="text" id="text" /》《input id="add" type="button" value="添加" /》《div》 《h3》待办事项《/h3》 《ul id="list"》 《/ul》 《input type="button" value="选择全部" id="selectAll" /》 《input type="button" value="删除全部" id="removeAll" /》 《input type="button" value="删除" id="remove" /》《/div》《script》window.onload = function () { function getById (id) { return document.getElementById(id); } var input = getById(’text’); var add = getById(’add’); var selectAll = getById(’selectAll’); var removeAll = getById(’removeAll’); var remove = getById(’remove’); var list = getById(’list’); add.onclick = function () { var inputValue = input.value; var li; if (inputValue) { li = document.createElement(’li’); li.innerHTML = ’《input type="checkbox" /》’ + input.value; input.value = ’’; list.appendChild(li); } }; selectAll.onclick = function () { var cks = list.getElementsByTagName(’input’); var i; var length = cks.length; var ck; for (i = 0; i 《 length; i++) { ck = cks; if(!ck.checked) { ck.checked = true; } } }; remove.onclick = function () { var cks = list.getElementsByTagName(’input’); var i; var ck; var li; for (i = cks.length - 1; i 》= 0; i--) { ck = cks; if(ck.checked) { li = ck.parentNode; li.parentNode.removeChild(li); } } }; removeAll.onclick = function () { list.innerHTML = ’’; };}《/script》
要通过JavaScript获取列表单中指定元素的个数,通常使用什么属性
通常使用length属性，无论是元素的集合还是数组中元素的个数，均可以通过length属性实现获取元素的个数。
javascript语句选中列表的某一项
《script》function seloptions() { var obj = document.getElementById("a1"); obj.options.selected = true;}《/script》
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，采用同样的技术，多加几个，但是就是传参数比较麻烦
--》
《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》
