zoukankan      html  css  js  c++  java
  • Js select option

    Java代码 
    1. <select id="id">  
    2.    <option value="1">你好</option>  
    3. </select>  
    4. var i =document.getElementById("id");  
    5. document.getElementById("id").options[i.selectIndex].text  
    6.   
    7.   
    8.   
    9.   
    10. <form id="f">  
    11. <select size="1" name="s">  
    12. <option value="lizi.name">梨子面馆</option>  
    13. <option value="baidu.com">百度</option>  
    14. </select>  
    15. </form>  
    16.   
    17.   
    18. <script type="text/javascript">  
    19. <!--  
    20. var f = document.getElementById("f");  
    21.   
    22. //获得select列表项数目  
    23. document.write(f.s.options.length);  
    24. document.write(f.s.length);  
    25.   
    26. //当前选中项的下标(从0 开始)(有两种方法)  
    27. //如果选择了多项,则返回第一个选中项的下标  
    28. document.write(f.s.options.selectedIndex);  
    29. document.write(f.s.selectedIndex);  
    30.   
    31. //检测某一项是否被选中  
    32. document.write(f.s.options[0].selected);  
    33.   
    34. //获得某一项的值和文字  
    35. document.write(f.s.options[0].value);  
    36. document.write(f.s.options[1].text);  
    37.   
    38. //删除某一项  
    39. f.s.options[1] = null;  
    40.   
    41. //追加一项  
    42. f.s.options[f.s.options.length] = new Option("追加的text""追加的value");  
    43.   
    44. //更改一项  
    45. f.s.options[1] = new Option("更改的text""更改的value");  
    46. //也可以直接设置该项的 text 和 value  
    47. //-->  
    48. </script>  
    49.   
    50.   
    51. //全选列表中的项  
    52. function SelectAllOption(list)  
    53. {  
    54. for (var i=0; i<list.options.length; i++)  
    55. {  
    56. list.options[i].selected = true;  
    57. }  
    58. }  
    59.   
    60.   
    61. //反选列表中的项  
    62. function DeSelectOptions(list)  
    63. {  
    64. for (var i=0; i<list.options.length; i++)  
    65. {  
    66. list.options[i].selected = !list.options[i].selected;  
    67. }  
    68. }  
    69.   
    70.   
    71. //返回列表中选择项数目  
    72. function GetSelectedOptionsCnt(list)  
    73. {  
    74. var cnt = 0;  
    75. var i = 0;  
    76. for (i=0; i<list.options.length; i++)  
    77. {  
    78. if (list.options[i].selected)  
    79. {  
    80. cnt++;  
    81. }  
    82. }  
    83.   
    84. return cnt;  
    85. }  
    86.   
    87.   
    88. //清空列表  
    89. function ClearList(list)  
    90. {  
    91. while (list.options.length > 0)  
    92. {  
    93. list.options[0] = null;  
    94. }  
    95. }  
    96.   
    97.   
    98. //删除列表选中项  
    99. //返回删除项的数量  
    100. function DelSelectedOptions(list)  
    101. {  
    102. var i = 0;  
    103. var deletedCnt = 0;  
    104. while (i < list.options.length)  
    105. {  
    106. if (list.options[i].selected)  
    107. {  
    108. list.options[i] = null;  
    109. deletedCnt++;  
    110. }  
    111. else  
    112. {  
    113. i++;  
    114. }  
    115. }  
    116.   
    117. return deletedCnt;  
    118. }  
    119. //此函数查找相应的项是否存在  
    120. //repeatCheck是否进行重复性检查  
    121. //若为"v",按值进行重复值检查  
    122. //若为"t",按文字进行重复值检查  
    123. //若为"vt",按值和文字进行重复值检查  
    124. //其它值,不进行重复性检查,返回false  
    125. function OptionExists(list, optText, optValue, repeatCheck)  
    126. {  
    127. var i = 0;  
    128. var find = false;  
    129.   
    130. if (repeatCheck == "v")  
    131. {  
    132. //按值进行重复值检查  
    133. for (i=0; i<list.options.length; i++)  
    134. {  
    135. if (list.options[i].value == optValue)  
    136. {  
    137. find = true;  
    138. break;  
    139. }  
    140. }  
    141. }  
    142. else if (repeatCheck == "t")  
    143. {  
    144. //按文字进行重复检查  
    145. for (i=0; i<list.options.length; i++)  
    146. {  
    147. if (list.options[i].text == optText)  
    148. {  
    149. find = true;  
    150. break;  
    151. }  
    152. }  
    153. }  
    154. else if (repeatCheck == "vt")  
    155. {  
    156. //按值和文字进行重复检查  
    157. for (i=0; i<list.options.length; i++)  
    158. {  
    159. if ((list.options[i].value == optValue) && (list.options[i].text ==  
    160.   
    161. optText))  
    162. {  
    163. find = true;  
    164. break;  
    165. }  
    166. }  
    167. }  
    168.   
    169. return find;  
    170. }  
    171.   
    172.   
    173. //向列表中追加一个项  
    174. //list 是要追加的列表  
    175. //optText 和 optValue 分别表示项的文字和值  
    176. //repeatCheck 是否进行重复性检查,参见 OptionExists  
    177. //添加成功返回 true,失败返回 false  
    178. function AppendOption(list, optText, optValue, repeatCheck)  
    179. {  
    180. if (!OptionExists(list, optText, optValue, repeatCheck))  
    181. {  
    182. list.options[list.options.length] = new Option(optText, optValue);  
    183. return true;  
    184. }  
    185. else  
    186. {  
    187. return false;  
    188. }  
    189. }  
    190.   
    191.   
    192. //插入项  
    193. //index 插入位置,当插入位置 >= 列表现有项数量时,其作用相当于不进行重复检  
    194.   
    195. 查的追加项  
    196. //optText 和 optValue 分别表示项的文字和值  
    197. function InsertOption(list, index, optText, optValue)  
    198. {  
    199. var i = 0;  
    200. for (i=list.options.length; i>index; i--)  
    201. {  
    202. list.options[i] = new Option(list.options[i-1].text, list.options[i-  
    203.   
    204. 1].value);  
    205. }  
    206.   
    207. list.options[index] = new Option(optText, optValue);  
    208. }  
    209. //将一个列表中的项导到另一个列表中  
    210. //repeatCheck是否进行重复性检查,参见OptionExists  
    211. //deleteSource项导到目标后,是否删除源列表中的项  
    212. //返回影响的项数量  
    213. function ListToList(sList, dList, repeatCheck, deleteSource)  
    214. {  
    215. //所影响的行数  
    216. var lines = 0;  
    217. var i = 0;  
    218. while (i<sList.options.length)  
    219. {  
    220. if (sList.options[i].selected && AppendOption(dList, sList.options[i].text,  
    221.   
    222. sList.options[i].value, repeatCheck))  
    223. {  
    224. //添加成功  
    225. lines++;  
    226. if (deleteSource)  
    227. {  
    228. //删除源列表中的项  
    229. sList.options[i] = null;  
    230. }  
    231. else  
    232. {  
    233. i++;  
    234. }  
    235. }  
    236. else  
    237. {  
    238. i++;  
    239. }  
    240. }  
    241.   
    242. return lines;  
    243. }  
    244.   
    245.   
    246. //列表中选中项上移  
    247. function MoveSelectedOptionsUp(list)  
    248. {  
    249. var i = 0;  
    250. var value = "";  
    251. var text = "";  
    252. for (i=0; i<(list.options.length-1); i++)  
    253. {  
    254. if (!list.options[i].selected && list.options[i+1].selected)  
    255. {  
    256. value = list.options[i].value;  
    257. text = list.options[i].text;  
    258. list.options[i] = new Option(list.options[i+1].text, list.options  
    259.   
    260. [i+1].value);  
    261. list.options[i].selected = true;  
    262. list.options[i+1] = new Option(textvalue);  
    263. }  
    264. }  
    265. }  
    266.   
    267.   
    268. //列表中选中项下移  
    269. function MoveSelectedOptionsDown(list)  
    270. {  
    271. var i = 0;  
    272. var value = "";  
    273. var text = "";  
    274. for (i=list.options.length-1; i>0; i--)  
    275. {  
    276.   
    277.   
    278. if (!list.options[i].selected && list.options[i-1].selected)  
    279. {  
    280. value = list.options[i].value;  
    281. text = list.options[i].text;  
    282. list.options[i] = new Option(list.options[i-1].text, list.options[i-  
    283.   
    284. 1].value);  
    285. list.options[i].selected = true;  
    286. list.options[i-1] = new Option(textvalue);  
    287. }  
    288. }  

  • 相关阅读:
    angular-ui-bootstrap-modal必须要说的几个点(转)
    [MySQL]
    [FORWARD]ODBC 各种数据库连接串
    从零开始学习前端JAVASCRIPT — 12、JavaScript面向对象编程
    从零开始学习前端JAVASCRIPT — 11、JavaScript运动模型及轮播图效果、放大镜效果、自适应瀑布流
    从零开始学习前端JAVASCRIPT — JavaScript中this指向的四种情况
    从零开始学习前端JAVASCRIPT — 10、JavaScript基础ES6(ECMAScript6.0)
    Demo—cookie电商购物车
    从零开始学习前端JAVASCRIPT — 9、JavaScript基础RegExp(正则表达式)
    Demo—标题左右两侧的对等横线
  • 原文地址:https://www.cnblogs.com/ungshow/p/1422544.html
Copyright © 2011-2022 走看看