JavaScript和JQuery和angularjs操作select · JS重塑學習

今天使用angularjs操作select下拉列表，發現了一些問題，這里特意來總結一下他和JS,以及jquery的用法； **<select>標簽定義和用法** select 元素可創建單選或多選菜單。當提交表單時，瀏覽器會提交選定的項目，或者收集用逗號分隔的多個選項，將其合成一個單獨的參數列表，并且在將 <select> 表單數據提交給服務器時包括 name 屬性。 **<select>標簽可選的屬性** 屬性 ? ? ? ? 值 ? ? ?描述 disabled ?disabled ?規定禁用該下拉列表。 multiple ? multiple 規定可選擇多個選項。 name ? ? ? ?name ? ?規定下拉列表的名稱。 size ? ? ? ?number ?規定下拉列表中可見選項的數目。 **<select>標簽全局屬性** <select> 標簽支持 HTML 中的全局屬性。 **<select>標簽事件屬性** <select> 標簽支持 HTML 中的事件屬性。 **<select>標簽用法舉例** <select name="list"> <option value="1">test1</option> <option value="2">test2</option> <option value="3">test3</option> </select> 設置默認選中可在option 中添加 selected = "selected",具體舉例如下: <option value="2" selected="selected">test2</option> 給某個option 添加 selected = "selected" 屬性就是默認選項,當然也可以簡寫成selected； **操作<select>標簽** 1.動態創建select ~~~ function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } ~~~ 這里要注意一點是這段代碼必須放在body后面執行；而且這里動態添加也可以通過ID來添加，這樣定位會更精確一點在日常開發中也用的最多； ~~~ <body > <div id="selectDiv"> </div> </body> <script> function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; var div=document.getElementById("selectDiv"); div.appendChild(mySelect); } ~~~ **2.添加選項option** ~~~ function addOption(){ //根據id查找對象， var obj=document.getElementById('mySelect'); //添加一個選項 obj.add(new Option("文本","值")); } ~~~ **3.動態添加選項option** 在開發中我們經常會用到動態的去添加option里面的值，我們也沒去和后臺交互，最簡單的辦法就是通過ajax請求，得到后臺傳過來的數據，然后我們去拼裝這個option格式的字符串，最后去顯示； ~~~ $.ajax({ url:'action', type:'post', data:data, async : false, //默認為true 異步 error:function(){ alert('error'); }, success:function(data){ $("#mySelect").append(data); } }); ~~~ 當然這種方法比較笨重，如果使用angularjs的話，就可以在后臺得到這個下拉框的list集合，然后通過頁面取遍歷 ~~~ <select ng-model="select.Myselect"> <option ng-repeat="item in list" value="item.id"> {{item.value}} </option> </select> ~~~ **4.刪除所有選項option** ~~~ function removeAll(){ var obj=document.getElementById('mySelect'); obj.options.length=0; } ~~~ **5.刪除一個選項option** ~~~ function removeOne(){ var obj=document.getElementById('mySelect'); //index,要刪除選項的序號，這里取當前選中選項的序號 var index=obj.selectedIndex; obj.options.remove(index); } ~~~ **6.獲得選項option的值** ~~~ var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 選中索引 var text = obj.options[index].text; // 選中文本 var value = obj.options[index].value; // 選中值 jQuery中獲得選中select值 function removeOne(){ var obj=document.getElementById('mySelect'); //index,要刪除選項的序號，這里取當前選中選項的序號 var index=obj.selectedIndex; obj.options.remove(index); } 第一種方式 $('#testSelect option:selected').text();//選中的文本 $('#testSelect) .val();//選中的值 $("#testSelect ").get(0).selectedIndex;//索引第二種方式 $("#tesetSelect").find("option:selected").text();//選中的文本 …….val(); …….get(0).selectedIndex; ~~~ **7.修改選項option** var obj=document.getElementById('mySelect'); var index=obj.selectedIndex; //序號，取當前選中選項的序號 var val = obj.options[index]=new Option("新文本","新值"); **8.刪除select** function removeSelect(){ var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect); }