快捷導(dǎo)航

javascript 刪除select中的所有option的實(shí)例

更新時(shí)間：2017年09月17日 11:08:44 作者：xiaobojava

這篇文章主要介紹了javascript 刪除select中的所有option的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下

javascript 刪除select中的所有option的實(shí)例

方法一：

function DeleteOptions() 
  { 
    var obj = document.getElementsByTagName("select")[0]; 
    var selectOptions = obj.options; 
    var optionLength = selectOptions.length; 
    for(var i=0;i <optionLength;i++) 
    { 
      obj.removeChild(selectOptions[0]); 
    } 
  }

方法二：(那右邊的Select中的所有option移到左邊的Select)

function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').length; 
    var TempText; 
    var TempValue; 
    for(var i=0;i<columnlength;i++){ 
      TempText=$('queryColumn').options[i].text; 
      TempValue=$('queryColumn').options[i].value; 
      $('queryColumn').remove(i); 
      $('SearchqqueryColumn').options.add(new Option(TempText,TempValue)); 
    } 
  }

以上兩個(gè)方法都不夠好！因?yàn)樗鼈円淮涡远純猿涣?，因?yàn)閯h除了一個(gè)它的$('queryColumn')在option的序號(hào)就變了！
都好的方法是：

$('SearchqqueryColumn').options.length = 0;

或：

<script> 
function clearOption() 
{ 
  document.getElementById("testSelect").options.length = 0; 
} 
</script>

(那右邊的Select中的所有option移到左邊的Select)實(shí)現(xiàn)如下：

function MoveAllRightBtn(){ 
    var columnlength=$('queryColumn').options.length; 
    var TempText; 
    var TempValue; 
    for(var i=0;i<columnlength;i++){ 
      TempText=$('queryColumn').options[i].text; 
      TempValue=$('queryColumn').options[i].value; 
      $('SearchqqueryColumn').options.add(new Option(TempText,TempValue)); 
    } 
    $('queryColumn').options.length = 0; 
  }

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

HTML5+setCutomValidity()函數(shù)驗(yàn)證表單實(shí)例分享
本文給大家分享的是在HTML5中結(jié)合setCutomValidity()函數(shù)實(shí)現(xiàn)驗(yàn)證表單的實(shí)例，非常的時(shí)間實(shí)用，這里推薦給大家，有需要的小伙伴可以參考下。
2015-04-04
js定義對象或數(shù)組直接量時(shí)各瀏覽器對多余逗號(hào)的處理(json)
定義對象或數(shù)組直接量時(shí)不同瀏覽器引擎對多余逗號(hào)的處理，js報(bào)錯(cuò)分為兩種：語法錯(cuò)誤和運(yùn)行錯(cuò)誤。
2011-03-03
javascript createElement()創(chuàng)建input不能設(shè)置name屬性的解決方法
今天在使用document.createElement()動(dòng)態(tài)創(chuàng)建input時(shí)，發(fā)現(xiàn)不能為其name賦值，以下是測試代碼。
2009-10-10
純javascript實(shí)現(xiàn)選擇框的全選與反選功能
這篇文章主要介紹了純javascript實(shí)現(xiàn)選擇框的全選與反選 ,需要的朋友可以參考下
2019-04-04
一篇文章讓你看懂Js繼承與原型鏈
原型鏈?zhǔn)且环N關(guān)系，實(shí)例對象和原型對象之間的關(guān)系,關(guān)系是通過原型(__proto__)來聯(lián)系的,下面這篇文章主要給大家介紹了關(guān)于Js繼承與原型鏈的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-12-12
學(xué)習(xí)JavaScript設(shè)計(jì)模式之狀態(tài)模式
這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的狀態(tài)模式，對JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下
2016-01-01
微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單個(gè)或多個(gè)倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11
JS項(xiàng)目中對本地存儲(chǔ)進(jìn)行二次的封裝的實(shí)現(xiàn)
這篇文章主要介紹了JS項(xiàng)目中對本地存儲(chǔ)進(jìn)行二次的封裝,這里我們將要使用到的key存儲(chǔ)下來，新建一個(gè)叫constant-storage.js的文件，對外暴露一些key的鍵名，也方便后期統(tǒng)一修改，這里因?yàn)槎际呛懔浚悦Q我們都用大寫表示，需要的朋友可以參考下
2022-07-07
作用域是JavaScript最重要的概念之一，想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域鏈作簡單的介紹，希望能幫助大家更好的學(xué)習(xí)JavaScript。
2014-05-05