JavaScript控制listbox列表框的項(xiàng)目上下移動(dòng)的方法
本文實(shí)例講述了JavaScript控制listbox列表框的項(xiàng)目上下移動(dòng)的方法。分享給大家供大家參考。具體分析如下:
這段JS代碼可以控制listbox內(nèi)的元素向上或者向下移動(dòng),這個(gè)功能非常有用。下面是詳細(xì)的代碼
var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;
if(-1 == selIndex) {
alert("Please select an option to move.");
return;
}
var increment = -1;
if(direction == 'up')
increment = -1;
else
increment = 1;
if((selIndex + increment) < 0 ||
(selIndex + increment) > (listbox.options.length-1)) {
return;
}
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text
listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;
listbox.selectedIndex = selIndex + increment;
}
//..
//..
listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option
下面是詳細(xì)的演示代碼,可以在瀏覽器內(nèi)使用
<select id="lsbox" name="lsbox" size="10" multiple="">
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">China</option>
<option value="4">Italy</option>
<option value="5">Germany</option>
<option value="6">Canada</option>
<option value="7">France</option>
<option value="8">United Kingdom</option>
</select> <br>
<button onclick="listboxMove('lsbox', 'up');">Move Up</button>
<button onclick="listboxMove('lsbox', 'down');">Move Down</button>
<script>
function listboxMove(listID, direction) {
var listbox = document.getElementById(listID);
var selIndex = listbox.selectedIndex;
if(-1 == selIndex) {
alert("Please select an option to move.");
return;
}
var increment = -1;
if(direction == 'up')
increment = -1;
else
increment = 1;
if((selIndex + increment) < 0 ||
(selIndex + increment) > (listbox.options.length-1)) {
return;
}
var selValue = listbox.options[selIndex].value;
var selText = listbox.options[selIndex].text;
listbox.options[selIndex].value = listbox.options[selIndex + increment].value
listbox.options[selIndex].text = listbox.options[selIndex + increment].text
listbox.options[selIndex + increment].value = selValue;
listbox.options[selIndex + increment].text = selText;
listbox.selectedIndex = selIndex + increment;
}
</script>
希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。
- JS ListBox的簡單功能實(shí)現(xiàn)代碼
- js 獲取Listbox選擇的值的代碼
- javascript實(shí)現(xiàn)listbox左右移動(dòng)實(shí)現(xiàn)代碼
- JavaScript如何從listbox里同時(shí)刪除多個(gè)項(xiàng)目
- 使用javascript實(shí)現(xiàn)ListBox左右全選,單選,多選,全請
- 用JavaScript實(shí)現(xiàn)類似于ListBox功能示例代碼
- JavaScript控制兩個(gè)列表框listbox左右交換數(shù)據(jù)的方法
- JavaScript列表框listbox全選和反選的實(shí)現(xiàn)方法
- 基于javascript實(shí)現(xiàn)listbox左右移動(dòng)
相關(guān)文章
基于JavaScript實(shí)現(xiàn)移動(dòng)端點(diǎn)擊圖片查看大圖點(diǎn)擊大圖隱藏
最近接了個(gè)項(xiàng)目,項(xiàng)目需求是這樣的,當(dāng)點(diǎn)擊圖片查看圖片,再次點(diǎn)擊大圖被隱藏,在移動(dòng)端用的比較多,因?yàn)橐苿?dòng)端屏幕小,需要查看大圖。具體代碼實(shí)現(xiàn)過程本文給大家介紹,需要的朋友可以參考下2015-11-11JavaScript中的call和apply的用途以及區(qū)別
本文主要介紹了JavaScript中的call和apply的用途以及區(qū)別。具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-01-01javascript Slip.js實(shí)現(xiàn)整屏滑動(dòng)的手機(jī)網(wǎng)頁
Slip.js能做什么?Slip.js可以讓你的手機(jī)網(wǎng)站像原生手機(jī)軟件一樣慣性滾動(dòng),手觸圖片輪換等等,對Slip.js感興趣的小伙伴們可以參考一下2015-11-11addEventListener()與removeEventListener()解析
這篇文章主要為大家詳細(xì)介紹了addEventListener()與removeEventListener(),用于處理指定和刪除事件處理程序操作,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04bootstrap時(shí)間控件daterangepicker使用方法及各種小bug修復(fù)
這篇文章主要介紹了bootstrap時(shí)間控件daterangepicker使用方法,及各種小bug修復(fù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10如何學(xué)JavaScript?前輩的經(jīng)驗(yàn)之談
這篇文章主要介紹了如何學(xué)JavaScript?前輩的經(jīng)驗(yàn)之談,也就是怎么學(xué)前端的問題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12