建站
咨詢
售后
建站咨詢
新聞中心
javascript怎么實現(xiàn)列表顯示與折疊
一、首先定義一個JavaScript function，如下：
你所需要的網(wǎng)站建設服務，我們均能行業(yè)靠前的水平為你提供.標準是產(chǎn)品質量的保證，主要從事成都網(wǎng)站設計、網(wǎng)站建設、外貿網(wǎng)站建設、企業(yè)網(wǎng)站建設、手機網(wǎng)站開發(fā)、網(wǎng)頁設計、成都品牌網(wǎng)站建設、網(wǎng)頁制作、做網(wǎng)站、建網(wǎng)站。成都創(chuàng)新互聯(lián)公司擁有實力堅強的技術研發(fā)團隊及素養(yǎng)的視覺設計專才。
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';
}
}
二、然后在網(wǎng)頁上定義一個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
js怎么添加一個下拉列表的值
javascript添加一個下拉列表項的方法：創(chuàng)建一個新的option節(jié)點，然后添加到目標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,通過自由父子，實現(xiàn)給select增加自定義option。
此時的顯示效果如下，其中option中有三項。
2、JS的函數(shù)設計如下：
現(xiàn)有的options如下：
3、在頁面上輸入新的數(shù)據(jù)，點擊添加。
此時的select效果顯示如下，自由添加功能實現(xiàn)。
javascript 如何創(chuàng)建一個list
很簡單的一個使用：點擊菜單，能夠顯示下面的或者不顯示
1，主要目的：： 展現(xiàn)的是的一個菜單項，然后點擊一下，隱藏，點一下，彈出下面的內容
用到的是 overflow：hidden ? ?和 ?overflow="visible"這兩個屬性 在點擊的function中，設置屬性應該node.style.overflow="visible";當然設置tr的高度也是很重要的，要恰好讓其他的選項隱蔽。
2，采用同樣的技術，多加幾個，但是就是傳參數(shù)比較麻煩，采用this傳參很常用
具體代碼如下。
!DOCTYPE?html
html
head
!--?1，主要目的：：?展現(xiàn)的是的一個菜單項，然后點擊一下，隱藏，點一下，彈出下面的內容
用到的是?overflow：hidden????和??overflow="visible"這兩個屬性?在點擊的function中，設置屬性應該
node.style.overflow="visible";
2，采用同樣的技術，多加幾個，但是就是傳參數(shù)比較麻煩
--
titlelist.html/title
!--link?rel="stylesheet"?type="text/css"?href="./styles.css"--
style?type="text/css"
dl{
height:18px;/*優(yōu)先級問題，必須要寫*/
overflow:hidden;
}
dd{
margin:0px;
padding:0px;
}
.close{
height:18px;/*優(yōu)先級問題，必須要寫*/
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
用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獲取下拉列表框當中的文本值示例代碼
近日碰到一個問題，就是需要將用戶點擊下拉列表當中某個選項后，將其所選的內容保存起來，例如下面的HTML代碼：
復制代碼
代碼如下:
select
onchange="isSelected(this.value);"
id="city"
option
value="1"北京/option
option
value="2"
上海/option
option
value="2"
廣州/option
/select
也就是說當用戶選擇“上海”這一列時，需要將“上海”這個名稱保存起來。其實方法很簡單?？聪旅鎗avascript代碼：
復制代碼
代碼如下:
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函數(shù)。
在javascript函數(shù)當中，通過domcument對象獲取當前下拉框的節(jié)點元素，由于節(jié)點的值并非只有一個，所以我們可以通過循環(huán)節(jié)點來得到每個選項的值。在循環(huán)的時候通過判斷當前選項是否選中，如果選中則使用city[i].innerText
方式獲取當前所選中的文本值。當然如果需要獲取選項值，只需如此即可：city[i].value.
至此，通過以上方法在IE下已能達到所要的結果。但是，在FIREFOX下測試時，發(fā)現(xiàn)此法不起作用，最后通過查閱資料發(fā)現(xiàn)另外一個方法。將city[i].innerText
改為
city[i].text即可。這種方法對IE及FIXEFOX都適用！
當前題目：javascript列表,javascript列表排序
網(wǎng)站URL：http://fisionsoft.com.cn/article/dscdsoc.html
