jasmine214--love

??1 一基礎理解:?
??2
??3 var?e? = ?document.getElementById( " selectId " );?
??4
??5 e.?options = ? new ?Option( " 文本 " , " 值 " )?;?
??6
??7 // 創建一個option對象,即在<select>標簽中創建一個或多個<option?value="值">文本</option>?
??8
??9 // options是個數組,里面可以存放多個<option?value="值">文本</option>這樣的標簽?
?10
?11 1 :options[?]數組的屬性:?
?12
?13 length屬性 --------- 長度屬性?
?14
?15 selectedIndex屬性 -------- 當前被選中的框中的文本的索引值,此索引值是內存自動分配的( 0 , 1 , 2 , 3 ..)對應(第一個文本值,第二個文本值,第三個文本值,第四個文本值.)?
?16
?17 2 :單個option的屬性( --- obj.options[obj.selecedIndex]是指定的某個 < option > 標簽,是一個 --- )?
?18
?19 text屬性 --------- 返回 / 指定?文本?
?20
?21 value屬性 ------ 返回 / 指定?值，與 < options?value = " " > 一致。?
?22
?23 index屬性 ------- 返回下標,?
?24
?25 selected?屬性 ------- 返回 / 指定該對象是否被選中.通過指定? true ?或者? false ，可以動態的改變選中項?
?26
?27 defaultSelected?屬性 ----- 返回該對象默認是否被選中。 true ? / ? false 。?
?28
?29 3 :option的方法?
?30
?31 增加一個 < option > 標簽 ----- obj.options.add( new ( " 文本 " , " 值 " )); < 增 > ?
?32
?33 刪除一個 < option > 標簽 ----- obj.options.remove(obj.selectedIndex) < 刪 > ?
?34
?35 獲得一個 < option > 標簽的文本 ----- obj.options[obj.selectedIndex].text < 查 > ?
?36
?37 修改一個 < option > 標簽的值 ----- obj.options[obj.selectedIndex] = new ?Option( " 新文本 " , " 新值 " ) < 改 > ?
?38
?39 刪除所有 < option > 標簽 ----- obj.options.length? = ? 0 ?
?40
?41 獲得一個 < option > 標簽的值 ----- obj.options[obj.selectedIndex].value?
?42
?43 注意:?
?44
?45 a:上面的寫的是如這樣類型的方法obj.options.function()而不寫obj.funciton,是因為為了考慮在IE和FF?下的兼容,如obj.add()只能在IE中有效.?
?46
?47 b:obj.option中的option不需要大寫, new ?Option中的Option需要大寫?
?48
?49 二?應用?
?50
?51 < html > ?
?52 < head > ?
?53 < script?language = " javascript " > ?
?54 function?number() {?
?55 var?obj? = ?document.getElementById( " mySelect " );?
?56 ???? // obj.options[obj.selectedIndex]?=?new?Option("我的吃吃","4"); // 在當前選中的那個的值中改變?
?57 ???? // obj.options.add(new?Option("我的吃吃","4"));再添加一個option?
?58 ???? // alert(obj.selectedIndex); // 顯示序號，option自己設置的?
?59 ???? // obj.options[obj.selectedIndex].text?=?"我的吃吃";更改值?
?60 ??? // obj.remove(obj.selectedIndex);刪除功能?
?61 } ?
?62 </ script > ?
?63 </ head > ?
?64 < body > ?
?65 < select?id = " mySelect " > ?
?66 ????? < option > 我的包包 </ option > ?
?67 ????? < option > 我的本本 </ option > ?
?68 ????? < option > 我的油油 </ option > ?
?69 ????? < option > 我的擔子 </ option > ?
?70 </ select > ?
?71 < input?type = " button " ?name = " button " ?value = " 查看結果 " ?onclick = " number(); " > ?
?72 </ body > ?
?73 </ html > ?
?74
?75
?76
?77
?78 根據這些東西,自己用JQEURY?AJAX + JSON實現了一個小功能如下:?
?79
?80 JS代碼:(只取了于SELECT相關的代碼)?
?81 /**?*/ /** ?
?82 ???*?@description?構件聯動下拉列表?(用JQUERY?的AJAX配合JSON實現)?
?83 ???*?@prarm?selectId?下拉列表的ID?
?84 ???*?@prarm?method?要調用的方法名稱?
?85 ???*?@prarm?temp?此處存放軟件ID?
?86 ???*?@prarm?url?要跳轉的地址?
?87 ??? */ ?
?88 function?linkAgeJson(selectId,method,temp,url) {????
?89 ??????$j.ajax( {?????
?90 ????????????type:? " get " , // 使用get方法訪問后臺?
?91 ????????????dataType:? " json " , // 返回json格式的數據?
?92 ????????????url:?url, // 要訪問的后臺地址?
?93 ????????????data:? " method= " ? + ?method + " &temp= " + temp, // 要發送的數據?????????
?94 ????????????success:?function(msg) { // msg為返回的數據，在這里做數據綁定?
?95 ????????????????var?data? = ?msg.lists;?
?96 ????????????????coverJsonToHtml(selectId,data);??????????????
?97 ????????????} ?
?98 ????????} );?
?99 } ?
100
101 /**?*/ /** ?
102 *?@description?將JSON數據轉換成HTML數據格式?
103 *?@prarm?selectId?下拉列表的ID?
104 *?@prarm?nodeArray?返回的JSON數組?
105 *?
106 */ ?
107 function?coverJsonToHtml(selectId,nodeArray) {?
108 // get?select?
109 ???var?tempSelect = $j( " # " + selectId);?
110 ??? // clear?select?value?
111 ???isClearSelect(selectId, ' 0 ' );????
112 var?tempOption = null ;?
113 for (var?i = 0 ;i < nodeArray.length;i ++ ) {?
114 // create?select?Option?
115 tempOption = ?$j( ' <option?value=" ' + nodeArray[i].dm + ' "> ' + nodeArray[i].mc + ' </option>? ' );?
116 // put?Option?to?select?
117 tempSelect.append(tempOption);?
118 ????????} ?
119 ???????? // ?獲取退化構件列表?
120 ???????getCpgjThgl(selectId, ' thgjDm ' );?
121 ???} ?
122 ??? /**?*/ /** ?
123 ???*?@description?清空下拉列表的值?
124 ???*?@prarm?selectId?下拉列表的ID?
125 ???*?@prarm?index?開始清空的下標位置?
126 ??? */ ?
127 function?isClearSelect(selectId,index) {?
128 ?????var?length = document.getElementById(selectId).options.length;?
129 while (length != index) {?
130 ?????? // 長度是在變化的，因為必須重新獲取?
131 ??????????length = document.getElementById(selectId).options.length;?
132 ?????????? for (var?i = index;i < length;i ++ )?
133 ?????????????document.getElementById(selectId).options.remove(i);?
134 ?????????length = length / 2 ;?
135 ?????} ?
136 ???} ?
137 ??????
138 /**?*/ /** ?
139 *?@description?獲取退化構件列表?
140 *?@prarm?selectId1?引用軟件下拉列表的ID?
141 *?@prarm?selectId2?退化構件下拉列表的ID?
142 */ ?
143 ???function?getCpgjThgl(selectId1,selectId2) {?
144 ???var?obj1 = document.getElementById(selectId1); // 引用軟件下拉列表?
145 ???var?obj2 = document.getElementById(selectId2); // 退化構件下拉列表?
146 ???var?len = obj1.options.length;?
147 // 當引用軟件列表長度等于1時返回，不做操作?
148 ??? if (len == 1 ) {?
149 ?????????? return ? false ;?
150 ???} ?
151 ??? // 清空下拉列表的值，兩種方式都可以?
152 // ?isClearSelect(selectId2,'1');?
153 ????????????document.getElementById(selectId2).length = 1 ;?
154 ??? for (var?i = 0 ;i < len;?i ++ ) {?
155 var?option = ?obj1.options[i];?
156 // 引用軟件被選中項不加入?
157 if (i != obj1.selectedIndex) {?
158 // 克隆OPTION并添加到SELECT中???
159 obj2.appendChild(option.cloneNode( true ));?
160 } ?
161 } ?
162
163 ???} ?
164
165
166
167
168 HTML代碼:?
169
170 < TABLE?width = " 100% " ?border = 0 ?align = " left " ?cellPadding = 0 ?cellSpacing = 1 > ?
171 < tr > ?
172 < td? class = " Search_item_18 " > ? < span? class = " Edit_mustinput " >*</ span > 引用軟件： </ td > ?
173 < td? class = " Search_content_82 " > ?
174 < input?name = " yyrjMc " ?id = " yyrjMc " ?type = " text " ? class = " Search_input " ?tabindex = " 3 " ?size = " 30 " ? > ?
175 < input?name = " yyrjDm " ?id = " yyrjDm " ?type = " hidden " ? > ?
176 < input?type = " button " ? class = " Search_button_select " ?
177 onClick = " linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1'); " ?value = " 選擇 " > ?
178 </ td > ?
179 </ tr > ?
180 < tr > ?
181 < td? class = " Search_item " > ? < span? class = " Edit_mustinput " >*</ span > 引用分版： </ td > ?
182 < td? class = " Search_content " ?id = " yyfb " > ?
183 < select?name = " yyfbDm " ?style = " width:160 " ?id = " yyfbDm " ?onChange = " getCpgjThgl('yyfbDm','thgjDm') " > ?
184
185 </ select > ?
186 </ td > ?
187 </ tr > ?
188 < tr > ?
189 < td? class = " Search_item " > 退化構件： </ td > ?
190 < td? class = " Search_content " ?id = " thgj " > ?
191 ??? < select?name = " thgjDm " ?style = " width:160 " ?id = " thgjDm " > ?
192 < option?value = " -1 " ?selected > 無 </ option > ?
193 ??? </ select > ?
194 </ td > ?
195 </ tr > ?
196 </ TABLE >