﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>C++博客-fenglin-文章分类-jQuery</title><link>http://www.cppblog.com/fenglin/category/16803.html</link><description>创新、创意、挑战</description><language>zh-cn</language><lastBuildDate>Mon, 02 May 2011 07:38:01 GMT</lastBuildDate><pubDate>Mon, 02 May 2011 07:38:01 GMT</pubDate><ttl>60</ttl><item><title>jQuery对select操作</title><link>http://www.cppblog.com/fenglin/articles/145485.html</link><dc:creator>风林</dc:creator><author>风林</author><pubDate>Mon, 02 May 2011 03:43:00 GMT</pubDate><guid>http://www.cppblog.com/fenglin/articles/145485.html</guid><wfw:comment>http://www.cppblog.com/fenglin/comments/145485.html</wfw:comment><comments>http://www.cppblog.com/fenglin/articles/145485.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.cppblog.com/fenglin/comments/commentRss/145485.html</wfw:commentRss><trackback:ping>http://www.cppblog.com/fenglin/services/trackbacks/145485.html</trackback:ping><description><![CDATA[<span style="WIDOWS: 2; TEXT-TRANSFORM: none; TEXT-INDENT: 0px; BORDER-COLLAPSE: separate; FONT: medium Simsun; WHITE-SPACE: normal; ORPHANS: 2; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" class=Apple-style-span><span style="TEXT-ALIGN: left; LINE-HEIGHT: 21px; FONT-FAMILY: simsun; FONT-SIZE: 14px" class=Apple-style-span>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">//遍历option和添加、移除option<br>function changeShipMethod(shipping){<br>&nbsp;<wbr>var len = $("select[@name=ISHIPTYPE] option").length<br>&nbsp;<wbr>if(shipping.value != "CA"){<br>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$("select[@name=ISHIPTYPE] option").each(function(){<br>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>if($(this).val() == 111){<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$(this).remove();<br>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>}<br>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>});<br>&nbsp;<wbr>}else{<br>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$("&lt;option value='111'&gt;UPS Ground&lt;/option&gt;").appendTo($("select[@name=ISHIPTYPE]"));<br>&nbsp;<wbr>}<br>}</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px"><br>//取得下拉选单的选取值</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">$(#testSelect option:selected').text();<br>或$("#testSelect").find('option:selected').text();<br>或$("#testSelect").val();<br>//////////////////////////////////////////////////////////////////<br>记性不好的可以收藏下：<br>1,下拉框:</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">var cc1&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>= $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)<br>var cc2 = $('.formc select[@name="country"]').val();&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>//得到下拉菜单的选中项的值<br>var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值<br>$("#select").empty();//清空下拉框//$("#select").html('');<br>$("&lt;option value='1'&gt;1111&lt;/option&gt;").appendTo("#select")//添加下拉框的option</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">稍微解释一下:<br>1.select[@name='country'] option[@selected] 表示具有name 属性，<br>并且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素；<br>可以看出有@开头的就表示后面跟的是属性。</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">2,单选框:<br>$("input[@type=radio][@checked]").val();&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>//得到单选框的选中项的值(注意中间没有空格)<br>$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">3,复选框:<br>$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值<br>$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出<br>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>alert($(this).val());<br>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>});</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">$("#chk1").attr("checked",'');//不打勾<br>$("#chk2").attr("checked",true);//打勾<br>if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px"><br>当然jquery的选择器是强大的. 还有很多方法.</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">&lt;script src="jquery-1.2.1.js" type="text/javascript"&gt;&lt;/script&gt;<br>&lt;script language="javascript" type="text/javascript"&gt;<br>$(document).ready(function(){<br>$("#selectTest").change(function()<br>{<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>//alert("Hello");<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>//alert($("#selectTest").attr("name"));<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>//$("a").attr("href","xx.html");<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>//window.location.href="xx.html";<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>//alert($("#selectTest").val());<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>alert($("#selectTest option[@selected]").text());<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$("#selectTest").attr("value", "2");</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">});<br>});<br>&lt;/script&gt;</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px"><br>&lt;a href="#"&gt;aaass&lt;/a&gt;</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">&lt;!--下拉框--&gt;<br>&lt;select id="selectTest" name="selectTest"&gt;<br>&lt;option value="1"&gt;11&lt;/option&gt;<br>&lt;option value="2"&gt;22&lt;/option&gt;<br>&lt;option value="3"&gt;33&lt;/option&gt;<br>&lt;option value="4"&gt;44&lt;/option&gt;<br>&lt;option value="5"&gt;55&lt;/option&gt;<br>&lt;option value="6"&gt;66&lt;/option&gt;<br>&lt;/select&gt;<br>jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中项的值<br>var item = $('input[@name=items][@checked]').val();<br>获取select被选中项的文本<br>var item = $("select[@name=items] option[@selected]").text();<br>select下拉框的第二个元素为当前选中值<br>$('#select_id')[0].selectedIndex = 1;<br>radio单选组的第二个元素为当前选中值<br>$('input[@name=items]').get(1).checked = true;<br>获取值：<br>文本框，文本区域：$("#txt").attr("value")；<br>多选框checkbox：$("#checkbox_id").attr("value")；<br>单选组radio： $("input[@type=radio][@checked]").val();<br>下拉框select： $('#sel').val();<br>控制表单元素：<br>文本框，文本区域：$("#txt").attr("value",'');//清空内容<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$("#txt").attr("value",'11');//填充内容<br>多选框checkbox： $("#chk1").attr("checked",'');//不打勾<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$("#chk2").attr("checked",true);//打勾<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>if($("#chk1").attr('checked')==undefined) //判断是否已经打勾<br>单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项<br>下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$("&lt;optionvalue='1'&gt;1111&lt;/option&gt;&lt;optionvalue='2'&gt; 2222&lt;/option&gt;").appendTo("#sel")//添加下拉框的option<br>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr>&nbsp;<wbr><span class=Apple-converted-space>&nbsp;</span>$("#sel").empty()；//清空下拉框</p>
<p style="PADDING-BOTTOM: 0px; LINE-HEIGHT: 21px; BORDER-RIGHT-WIDTH: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px 0px 5px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; WORD-WRAP: normal; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; WORD-BREAK: normal; BORDER-LEFT-WIDTH: 0px; PADDING-TOP: 0px">获取一组radio被选中项的值<br>var item = $('input[@name=items][@checked]').val();<br>获取select被选中项的文本<br>var item = $("select[@name=items] option[@selected]").text();<br>select下拉框的第二个元素为当前选中值<br>$('#select_id')[0].selectedIndex = 1;<br>radio单选组的第二个元素为当前选中值<br>$('input[@name=items]').get(1).checked = true;<br>获取值：<br>文本框，文本区域：$("#txt").attr("value")；<br>多选框checkbox：$("#checkbox_id").attr("value")；<br>单选组radio： $("input[@type=radio][@checked]").val();<br>下拉框select： $('#sel').val();<br>控制表单元素：<br>文本框，文本区域：$("#txt").attr("value",'');//清空内容<br>$("#txt").attr("value",'11');//填充内容<br>多选框checkbox： $("#chk1").attr("checked",'');//不打勾<br>$("#chk2").attr("checked",true);//打勾<br>if($("#chk1").attr('checked')==undefined) //判断是否已经打勾<br>单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项<br>下拉框select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项<br>$("&lt;option value='1'&gt;1111&lt;/option&gt;&lt;option value='2'&gt;2222&lt;/option&gt;").appendTo("#sel")//添加下拉框的option<br>$("#sel").empty()；//清空下拉框</p>
</span></span>
<img src ="http://www.cppblog.com/fenglin/aggbug/145485.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.cppblog.com/fenglin/" target="_blank">风林</a> 2011-05-02 11:43 <a href="http://www.cppblog.com/fenglin/articles/145485.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>