JS 實(shí)現(xiàn)列表與多選框選擇附預(yù)覽動(dòng)畫
更新時(shí)間:2014年10月29日 16:58:13 投稿:whsnow
本節(jié)為大家介紹的是用JS實(shí)現(xiàn)列表與多選框選擇,并附gif演示動(dòng)畫,這個(gè)例子很詳細(xì),大家可以看看
1功能預(yù)覽
2html代碼
<span> <tr> <td><img onclick="addType()" src="${msUrl}/images/logo/add.png">產(chǎn)品范圍:</td> <td><select id="selectTypeOne" class="easyui-combobox" data-options="required:true"> <option>一級(jí)分類</option> </select> <select id="selectTypeTwo" class="easyui-combobox" data-options="required:true"> <option selected="selected">全部</option> </select></td> </tr> <tr height="20px"> <td></td> <td id="typeThree"></td> </tr> <tr height="30px"> <td></td> <td><span id="typeOneResult"></span><span id="typeOneSubResult"></span> <hr /></td> </tr> </span>
3js代碼
$('#selectTypeOne').combobox({ url : config.urlMap.typeList, valueField : 'name', textField : 'name', required : true, width : '100', onSelect : function(row) { typeName1 = row.name $('#typeThree').html(""); $('#typeOneResult').html(""); $('#typeOneSubResult').html(""); subTypeName=[]; $('#selectTypeTwo').combobox({ url : config.urlMap.typeList + "?parent=" + row.id, valueField : 'name', textField : 'name', width : '100', required : true, onSelect : function(row) { typeName2 = typeName1 + ">" + row.name; $.getJSON(config.urlMap.typeList + "?parent=" + row.id, function(data) { var typeThreeName = "" for (var i = 0; i < data.length; i++) { typeThreeName += "<input onclick=clinkType(\"" + data[i].name + "\") name='typeThree' value=" + data[i].name + " type='checkbox'>" + data[i].name } $('#typeThree').html(typeThreeName); $('#typeOneResult').html(typeName2 + ">"); $('#typeOneSubResult').html(""); subTypeName=[]; }); } }) } }); }) //刪除下標(biāo)元素方式一 Array.prototype.remove = function(dx) { if (isNaN(dx) || dx > this.length) { return false; } for (var i = 0, n = 0; i < this.length; i++) { if (this[i] != this[dx]) { this[n++] = this[i] } } this.length -= 1 } //刪除數(shù)組元素方式二 Array.prototype.baoremove = function(dx) { if (isNaN(dx) || dx > this.length) { return false; } this.splice(dx, 1); } var subTypeName = []; function clinkType(name) { var index = subTypeName.indexOf(name) if (index == -1) { subTypeName.push(name); } else { subTypeName.baoremove(index); } $('#typeOneSubResult').html(subTypeName.join(",")); }
您可能感興趣的文章:
- Js自定義多選框效果的實(shí)例代碼
- 用原生JS實(shí)現(xiàn)簡(jiǎn)單的多選框功能
- AngularJS 單選框及多選框的雙向動(dòng)態(tài)綁定
- html+javascript+bootstrap實(shí)現(xiàn)層級(jí)多選框全層全選和多選功能
- AngularJS單選框及多選框?qū)崿F(xiàn)雙向動(dòng)態(tài)綁定
- JavaScript判斷表單中多選框checkbox選中個(gè)數(shù)的方法
- ExtJS 下拉多選框lovcombo
- ExtJS Grid使用SimpleStore、多選框的方法
- 用 Javascript 驗(yàn)證表單(form)中多選框(checkbox)值
- javascript 單選框,多選框美化代碼
- 兼容ie和firefox版本的js反選 全選 多選框
- JSP+Ajax 添加、刪除多選框
- JS面向?qū)ο笾噙x框?qū)崿F(xiàn)
相關(guān)文章
asp javascript 實(shí)現(xiàn)關(guān)閉窗口時(shí)保存數(shù)據(jù)的辦法
asp javascript 實(shí)現(xiàn)關(guān)閉窗口時(shí)保存數(shù)據(jù)的辦法...2007-11-11JavaScript實(shí)現(xiàn)倒計(jì)時(shí)代碼段Item1(非常實(shí)用)
現(xiàn)今團(tuán)購(gòu)網(wǎng)、電商網(wǎng)、門戶網(wǎng)等,常使用時(shí)間記錄重要的時(shí)刻,如時(shí)間顯示、倒計(jì)時(shí)差、限時(shí)搶購(gòu)等,本文分析不同倒計(jì)時(shí)效果的計(jì)算思路及方法,掌握日期對(duì)象Date,獲取時(shí)間的方法,計(jì)算時(shí)差的方法,實(shí)現(xiàn)不同的倒時(shí)計(jì)效果2015-11-11微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊生成隨機(jī)驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
這篇文章主要介紹了js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果,需要的朋友可以參考下2015-12-12