Terry.Li-彬

          虛其心,可解天下之問;專其心,可治天下之學;靜其心,可悟天下之理;恒其心,可成天下之業(yè)。

            BlogJava :: 首頁 :: 新隨筆 :: 聯(lián)系 :: 聚合  :: 管理 ::
            143 隨筆 :: 344 文章 :: 130 評論 :: 0 Trackbacks
          在很多地方都會用到 一些常用的下拉框?? 如民族 、生肖、學歷、血型 等等???? 所以我們就有必要用javaScript對這些進行一個簡單的封裝??如果很次都在?? html 中編寫這樣的代碼
          Html代碼
          1. <select?>????
          2. ??<option?></option>????
          3. ??<option?></option>???
          4. ??<option?></option>???
          5. </select>???

          無疑是失敗的??并且不好實現(xiàn)動態(tài)的實現(xiàn)選中項 對于這樣的考慮??????
          我們對這些進行一個簡單的?javaScript 代碼編寫
          createSelect.js 中的代碼:
          Js代碼
          1. var?arrayNation=new?Array(??
          2. ????'漢族','蒙古族','彝族','侗族','哈薩克族',????
          3. ????'畬族','納西族','仫佬族','仡佬族','怒族','保安族',???????
          4. ????'鄂倫春族','回族','壯族','瑤族','傣族','高山族',???????
          5. ????'景頗族','羌族','錫伯族','烏孜別克族','裕固族','赫哲族',??????
          6. ????'藏族','布依族','白族','黎族','拉祜族','柯爾克孜族','布朗族',??????
          7. ????'阿昌族','俄羅斯族','京族','門巴族','維吾爾族','朝鮮族',????
          8. ????'土家族','傈僳族','水族','土族','撒拉族','普米族','鄂溫克族',????
          9. ????'塔塔爾族','珞巴族','苗族','滿族','哈尼族','佤族','東鄉(xiāng)族',?????
          10. ????'達斡爾族','毛南族','塔吉克族','德昂族','獨龍族','基諾族');???
          11. ??
          12. var?arrayShengXiao=new?Array(??
          13. ????'鼠','牛','虎','兔','蛇',??
          14. ????'蛇','馬','羊','猴','雞','狗','豬');???
          15. ??
          16. var?arrayDegree=new?Array(??
          17. ????'小學','初中','高中','中專',??
          18. ????'大專','本科','碩士','博士');??
          19. ??
          20. ?/**?*創(chuàng)建民族選擇框?*/???
          21. function?createNationSelect(name,str)?{???
          22. ????document.write("<select?id='selectNation'></select>");???
          23. ????var?select=document.getElementById("selectNation");???
          24. ????for(var?i=0;i<arrayNation.length;i=i+1)?{????
          25. ????????select.name=name;????
          26. ????????var?opt=document.createElement("option");????
          27. ????????opt.value=arrayNation;????
          28. ????????opt.innerText=arrayNation;????
          29. ????????if(arrayNation==str)???{????
          30. ????????????opt.selected='true';????
          31. ????????}?????
          32. ????????select.appendChild(opt);??
          33. ???}??
          34. ?}???
          35. ??
          36. /**?*創(chuàng)建生肖選擇框?*/???
          37. function?createShengXiaoSelect(name,str)?{???
          38. ????document.write("<select?id='selectShengXiao'></select>");??
          39. ????var?select=document.getElementById("selectShengXiao");???
          40. ????for(var?i=0;i<arrayShengXiao.length;i=i+1)?{???
          41. ????????select.name=name;?????
          42. ????????var?opt=document.createElement("option");????
          43. ????????opt.value=arrayShengXiao;???
          44. ????????opt.innerText=arrayShengXiao;????
          45. ????????if(arrayShengXiao==str)???{????
          46. ????????????opt.selected='true';?????
          47. ????????}?????
          48. ????????select.appendChild(opt);???
          49. ???}???
          50. }???
          51. /**?*創(chuàng)建學歷選擇框?*/??
          52. function?createDegreeSelect(name,str)?{??
          53. ????document.write("<select?id='selectDegree'></select>");???
          54. ????var?select=document.getElementById("selectDegree");??
          55. ????for(var?i=0;i<arrayDegree.length;i=i+1)?{?????
          56. ????????select.name=name;????
          57. ????????var?opt=document.createElement("option");?????
          58. ????????opt.value=arrayDegree;?????
          59. ????????opt.innerText=arrayDegree;???
          60. ????????if(arrayDegree==str)???{???
          61. ????????????opt.selected='true';????
          62. ????????}?????
          63. ????????select.appendChild(opt);???
          64. ????}???
          65. }???


          然后在html文件我們就可以這樣使用了
          Html代碼
          1. <SCRIPT?src="createSelect.js"?language="javascript"></SCRIPT>???
          2. <script?type="text/javascript">????????
          3. ?????createNationSelect("userNation");???
          4. </script>???
          ??

          這樣就很容易就創(chuàng)建一個 name="userNation" 的下拉框??
          而且還很容易就實現(xiàn)了 指定默認選中項
          Html代碼
          1. <script?type="text/javascript">???????????
          2. ??createNationSelect("userNation","苗族");?</script>???

          如果要顯示一個用戶有民族的話
          Html代碼
          1. <script?type="text/javascript">????????
          2. ?????createNationSelect("userNation","${user.userNation}");??
          3. ?</script>???


          這樣就簡單多了
          可能到處重復利用了
          posted on 2009-08-26 09:13 禮物 閱讀(842) 評論(0)  編輯  收藏 所屬分類: javascript
          主站蜘蛛池模板: 盐亭县| 玛沁县| 平昌县| 平遥县| 高清| 张掖市| 固始县| 大埔区| 沧州市| 洛阳市| 屏东市| 固原市| 苗栗市| 江达县| 桑日县| 淮阳县| 富锦市| 闽清县| 西青区| 建水县| 大悟县| 西城区| 叙永县| 顺义区| 封开县| 珲春市| 改则县| 来安县| 共和县| 汝州市| 遵义市| 苗栗市| 东至县| 汝城县| 道孚县| 陕西省| 岚皋县| 石林| 杭锦旗| 阿拉善右旗| 寻甸|