Explanation on jquery obtaining all value and text instances of select and option-JS Tutorial-php.cn

Explanation on jquery obtaining all value and text instances of select and option

小云云

Release： 2018-01-23 13:59:21

Original

1614 people have browsed it

This article mainly brings you an example of jquery obtaining all the values and texts of select and option. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

Think about it, I have been learning jQuery for a few days, and today due to work needs, I need to get all the values and texts of the options corresponding to select, then splice them, and import them into an xml file. The result After working on it all afternoon, I finally got it done. The following is the corresponding code: The code in

was copied from someone else’s website. Now I need to get its value and text, and then splice it into

< Chaoyang>7 form

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript" > 
 $(document).ready(function(){ //等待所有dom绘制完成后就执行
  
     var arr = new Array(); //数组定义标准形式，不要写成Array arr = new Array();
     var all = ""; //定义变量全部保存
     $("#UserBorough option").each(function () {
       var txt = $(this).text(); //获取单个text
       var val = $(this).val(); //获取单个value
       var node = "<" + txt + ">" + val + "</" + txt + ">";
       arr.push(node);
       all += node;
     });
     alert(all);
     alert(arr);

  
 }); //$(document)
 </script>
</head>
<body>

 <select name="UserBorough" size="6" class="input" id="UserBorough" style="width:150px;" onchange="setSmallBorough(&#39;UserBorough&#39;,&#39;SmallBorough&#39;,&#39;/search_auto.aspx?searchtype=Borough&searchkey=&#39;+ this.options[this.selectedIndex].value +&#39;&#39;,&#39;&#39;);">
            <option value=7>朝阳</option><option value=1>海淀</option><option value=4>昌平</option><option value=8>丰台</option><option value=14>大兴</option><option value=2>东城</option><option value=3>西城</option><option value=5>崇文</option><option value=6>宣武</option><option value=12>通州</option><option value=13>顺义</option><option value=11>房山</option><option value=9>石景山</option><option value=10>门头沟</option><option value=15>怀柔</option><option value=18>密云</option><option value=17>延庆</option><option value=16>平谷</option><option value=448>周边</option>
</select>



</body>
</html>

Copy after login

Summary: Combining tools can save a lot of trouble. You can create a new html file in VS2010 Type the code and then copy the code to

Dreamweaver to run, this will save a lot of time.

Through this example, I realized that just by understanding the codes in the book and typing them down, you may not be able to write something. You still have to take more hands-on work

and write it yourself.

Related recommendations:

jQuery dynamically generates select option drop-down list implementation code

jQuery implements select drop-down box to obtain the currently selected Text

Detailed example of JQuery getting the text content of multiple select tag options

The above is the detailed content of Explanation on jquery obtaining all value and text instances of select and option. For more information, please follow other related articles on the PHP Chinese website!