select标签multiple属性的使用方法 - 推酷
select标签multiple属性的使用方法
前些日子公司让做一个功能模块，对于里面一个小功能费了些周折，现将其总结一下：
一、实现效果：
&!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&&
&title&select标签multiple属性的使用方法&/title&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&/&
&script type=&text/javascript&&
* @param fromSelectId option移动起始select标签id
* @param toSelectId option移动目的地select标签id
* @param addOrNot boolean类型——true表示当前进行的是添加操作，否则是删除操作
* @param moveAllOrNot boolean类型——true表示当前进行的是“全部”操作，否则当前进行的不是“全部”操作
function moveOptions(fromSelectId, toSelectId, addOrNot, moveAllOrNot){
var fromObject = document.getElementById(fromSelectId);
var toObject = document.getElementById(toSelectId);
if(fromObject.options.length == 0){
if(addOrNot){
alert(&没有找到可添加的选项！&);
alert(&没有找到可删除的选项！&);
if(fromObject.selectedIndex == -1 && moveAllOrNot == false){
if(addOrNot){
alert(&请先选择要添加的选项！&);
alert(&请先选择要删除的选项！&);
var toSelectOptionsList = new Array(toObject.options.length);//存放option移动目的地select标签所有option选项
var toSelectOptionPointer = 0;
for(; toSelectOptionPointer & toObject.options. toSelectOptionPointer ++){//将option移动目的地原有option选项存放到toSelectOptionsList数组中
if(toObject.options[toSelectOptionPointer] != null){
toSelectOptionsList[toSelectOptionPointer] = new Option(toObject.options[toSelectOptionPointer].text, toObject.options[toSelectOptionPointer].value);
for(var i = 0; i & fromObject.options. i ++){
if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){//将新添加的option选项存放到toSelectOptionsList数组中
toSelectOptionsList[toSelectOptionPointer] = new Option(fromObject.options[i].text, fromObject.options[i].value);
toSelectOptionPointer ++;
for(var i = 0; i & toSelectOptionsList. i ++){//重新整合option移动目的地select标签的option选项，以使新添加的显示出来
if(toSelectOptionsList[ i ] != null){
toObject.options[ i ] = toSelectOptionsList[ i ];
for(var i = fromObject.options.length - 1; i &= 0; i --){//重新整合option移动起始select标签的option选项，以便去掉删除的option选项
if(fromObject.options[i] != null && (fromObject.options[i].selected == true || moveAllOrNot)){
fromObject.options[i] =
function getSelectedValues(){
var selectedValues = &&;
var rightSelectObject = document.getElementById(&rightSelect&);
for(var i=0; i&rightSelectObject.options. i++){
selectedValues = rightSelectObject.options[i].value + ',' + selectedV
selectedValues = selectedValues.substring(0, selectedValues.lastIndexOf(','));
if(selectedValues == &&){
alert(&你没有选择任何选项！！！&);
alert(&你选中的值为：& + selectedValues);
&center style=&margin-top:12%&&&font color=&red& size=&5&&&b&select标签multiple属性的使用方法&/b&&/font&&/center&
&table border=&1& cellspacing=&0& align=&center&&
&td align=&center& width=&150px&&未选择&/td&
&td align=&center& width=&150px&&操作&/td&
&td align=&center& width=&150px&&已选择&/td&
&td align=&center& width=&150px&&
&select id=&leftSelect& name=&leftSelect& multiple=&multiple& size=&15& style=&width:100%; height:100%;&&
&option value=&07c9907f-bfb1-4e37-98e6-&&荸荠&/option&
&option value=&4e1c083f-c988-48b9-9a48-ff7dbe07e51f&&胡桃&/option&
&option value=&0e685a36-ddd1-24e4384b58&&杨梅&/option&
&option value=&0fc09295-ed4d-4e79-9c11-2f&&沙枣&/option&
&option value=&1cb5eccc-faa3-44df-ba62-bb5fcdf29036&&脐橙&/option&
&option value=&26e545ae-3647-45aa-8b9f-cef6a8d8c454&&芒果&/option&
&option value=&c2--b8c47e058ff4&&枇杷&/option&
&option value=&2ab-4451-bb63-e8a91dc63adb&&金桔&/option&
&option value=&ab-419d-948c-16ba1370613a&&青梅&/option&
&option value=&baa4df9c-e6f9-4d4d-bfb8-&&毛桃&/option&
&option value=&da0-4d3f-bf4b-21ed97037a0f&&金桔&/option&
&option value=&43a0912c-ba1b-fa&&酸橙&/option&
&option value=&37a76cf1-0b11-411a-8ce3-bb&&海棠&/option&
&option value=&78a49dc8-3920-47ff-9a3e-b6e31d337d67&&槟榔&/option&
&option value=&2cde-4b50-bf52-0ad&&杨桃&/option&
&option value=&a52bb-4520-ab8a-5&&樱桃&/option&
&option value=&8d3d65f7--9c9a-ba7&&芭乐&/option&
&option value=&7bc77-44a5-8e03-c043ebddc710&&鳄梨&/option&
&option value=&5c2f062b-3fd2-44c1-a8e2-d9&&西柚&/option&
&td align=&center& width=&150px&&
&input type=&button& onclick=&moveOptions('leftSelect', 'rightSelect', true, false);& value=&添加 &&& style=&text-align: margin-bottom:10 width:90&/&
&input type=&button& onclick=&moveOptions('rightSelect', 'leftSelect', false, false);& value=&删除 &&& style=&text-align: margin-bottom:10 width:90&/&
&input type=&button& onclick=&moveOptions('leftSelect', 'rightSelect', true, true);& value=&全部添加 &&& style=&margin-bottom:10 width:90&/&
&input type=&button& onclick=&moveOptions('rightSelect', 'leftSelect', false, true);& value=&全部删除 &&& style=&margin-bottom:10 width:90&/&
&td align=&center& width=&150px&&
&select id=&rightSelect& name=&rightSelect& multiple=&multiple& size=&15& style=&width:100%; height:100%;&&&/select&
&center&&input type=&button& value=&获取选项的value值& onclick=&getSelectedValues();&/&&/center&
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致INPUT TEXTAREA disabled color 更新 失效 颜色
本篇文章正在公测阶段，错误在所难免，欢迎大家提出宝贵的意见和建议。jQuery获取Select选择的Text和 Value(转) - yaoshiyou - 博客园
& &&& jQuery获取Select选择的Text和Value:语法解释：1. $("#select_id").change(function(){//code...});&& //为Select添加事件，当选择其中一项时触发2. var checkText=$("#select_id").find("option:selected").text();& //获取Select选择的Text3. var checkValue=$("#select_id").val();& //获取Select选择的Value4. var checkIndex=$("#select_id ").get(0).selectedI& //获取Select选择的索引值5. var maxIndex=$("#select_id option:last").attr("index");& //获取Select最大的索引值jQuery设置Select选择的 Text和Value:语法解释：1. $("#select_id ").get(0).selectedIndex=1;& //设置Select索引值为1的项选中2. $("#select_id ").val(4);&& // 设置Select的Value值为4的项选中3. $("#select_id option[text='jQuery']").attr("selected", true);&& //设置Select的Text值为jQuery的项选中 jQuery添加/删除Select的Option项：语法解释：1. $("#select_id").append("&option value='Value'&Text&/option&");& //为Select追加一个Option(下拉项)2. $("#select_id").prepend("&option value='0'&请选择&/option&");& //为Select插入一个Option(第一个位置)3. $("#select_id option:last").remove();& //删除Select中索引值最大Option(最后一个)4. $("#select_id option[index='0']").remove();& //删除Select中索引值为0的Option(第一个)5. $("#select_id option[value='3']").remove();& //删除Select中Value='3'的Option5. $("#select_id option[text='4']").remove();& //删除Select中Text='4'的Option /SAL2928/archive//1321285.html jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关 获 取一组radio被选中项的值 var item = $('input[name=items][checked]').val(); 获 取select被选中项的文本 var item = $("select[name=items] option[selected]").text(); select下拉框的第二个元素为当前选中值 $('#select_id')[0].selectedIndex = 1; radio单选组的第二个元素为当前选中值 $('input[name=items]').get(1).checked = 获取值： 文本框，文本区域：$("#txt").attr("value")； 多选框 checkbox：$("#checkbox_id").attr("value")； 单选组radio：&& $("input[type=radio][checked]").val(); 下拉框select： $('#sel').val(); 控制表单元素： 文本框，文本区域：$("#txt").attr("value",'');//清空内容 $("#txt").attr("value",'11');//填充内容 多选框checkbox： $("#chk1").attr("checked",'');//不打勾 $("#chk2").attr("checked",true);//打勾 if($("#chk1").attr('checked')==undefined) //判断是否已经打勾 单选组 radio：&&& $("input[type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项 下拉框 select：&& $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项 $("&option value='1'&1111&/option&&option value='2'&2222&/option&").appendTo("#sel")//添加下拉框的option $("#sel").empty()；//清空下拉框 ---------------------------------------------------------------------------------------------------- //遍历option和添加、移除optionfunction changeShipMethod(shipping){var len = $("select[name=ISHIPTYPE] option").lengthif(shipping.value != "CA"){$("select[name=ISHIPTYPE] option").each(function(){if($(this).val() == 111){$(this).remove();}});}else{$("&option value='111'&UPS Ground&/option&").appendTo($("select[name=ISHIPTYPE]"));}} //取得下拉選單的選取值 $(#testSelect option:selected').text();或$("#testSelect").find('option:selected').text();或$("#testSelect").val();//////////////////////////////////////////////////////////////////记 性不好的可以收藏下：1,下拉框: var cc1 = $(".formc select[name='country'] option[selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)var cc2 = $('.formc select[name="country"]').val(); //得到下拉菜单的选中项的值var cc3 = $('.formc select[name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值$("#select").empty();//清空下拉框 //$("#select").html('');$("&option value='1'&1111&/option&").appendTo("#select")//添加下拉框的option 稍微解释一下:1.select[name='country'] option[selected] 表示具有name 属性，并 且该属性值为'country' 的select元素 里面的具有selected 属性的option 元素； 2,单选框:$("input[@type=radio][@checked]").val(); //得到单选框的 选中项的值(注意中间没有空格)$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格) 3,复选框:$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值$("input[@type=checkbox][@checked]").each(function() { //由于复选框一般选中的是多个,所以可以循环输出alert($(this).val());}); $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);// 打勾if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾 当然jquery的选择器是强大的. 还有很多方法. &script src="jquery-1.2.1.js" type="text/javascript"&&/script&&script language="javascript" type="text/javascript"&$(document).ready(function(){$("#selectTest").change(function(){//alert("Hello");//alert($("#selectTest").attr("name"));//$("a").attr("href","xx.html");//window.location.href="xx.html";//alert($("#selectTest").val());alert($("#selectTest option[@selected]").text());$("#selectTest").attr("value", "2"); });});&/script& &a href="#"&aaass&/a& &!--下拉框--&&select id="selectTest" name="selectTest"&&option value="1"&11&/option&&option value="2"&22&/option&&option value="3"&33&/option&&option value="4"&44&/option&&option value="5"&55&/option&&option value="6"&66&/option&&/select&jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关获取一组radio被选中 项的值var item = $('input[@name=items][@checked]').val();获取select被选 中项的文本var item = $("select[@name=items] option[@selected]").text();select 下拉框的第二个元素为当前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个 元素为当前选中值$('input[@name=items]').get(1).checked =获取值：文本 框，文本区域：$("#txt").attr("value")；多选框 checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val();下拉框select： $('#sel').val();控 制表单元素：文本框，文本区域：$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');// 填充内容多选框checkbox： $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);// 打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("&optionvalue='1'&1111&/option&&optionvalue='2'&2222&/option&").appendTo("#sel")//添加下拉框的option$("#sel").empty()；// 清空下拉框 获取一组radio被选中项的值var item = $('input[@name=items][@checked]').val();获取select被选中项的文本var item = $("select[@name=items] option[@selected]").text();select下拉框的第二个元素为当 前选中值$('#select_id')[0].selectedIndex = 1;radio单选组的第二个元素为当前选中值$('input[@name=items]').get(1).checked =获取值：文本框，文本区域：$("#txt").attr("value")；多选框 checkbox：$("#checkbox_id").attr("value")；单选组radio： $("input[@type=radio][@checked]").val();下拉框select： $('#sel').val();控 制表单元素：文本框，文本区域：$("#txt").attr("value",'');//清空内容$("#txt").attr("value",'11');// 填充内容多选框checkbox： $("#chk1").attr("checked",'');//不打勾$("#chk2").attr("checked",true);// 打勾if($("#chk1").attr('checked')==undefined) //判断是否已经打勾单选组radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项$("&option value='1'&1111&/option&&option value='2'&2222&/option&").appendTo("#sel")//添加下拉框的option$("#sel").empty()；// 清空下拉框Jquery获取select标签的值、文本方式 -
- ITeye技术网站
博客分类：
首先看html代码：
&select multiple="multiple" id="select1"
size=”5”
name="dd"&
&optgroup label="坑爹组合"&
&option value="1" disabled="disabled"&我勒个去！&/option&
&option value="2"&坑爹啊！&/option&
&/optgroup&
&option value="3"&悲催啊！&/option&
&option id=”si” selected="selected ”
value="4"&冬瓜！&/option&
&option value="5"&我去！&/option&
先来说说&select&这个标签吧！
⑴ multiple这个属性是可以多选！它的写法就是：multiple="multiple"
⑵ size=”3”,就是这个select标签顶多可有3个option
⑶ disabled="disabled"：这个属性就是禁止下拉框下拉！就是不能用了！
⑷ option中的seleted=”selected” 就是在初始化时，下拉框中显示的是这个option了！说白了就是默认选定了！
⑸ optgroup这个标签就是在option选项中分类，方便我们选择。但是这不是一个option！
⑹ disabled="disabled" 的意思就是禁止这个option选择，就是你只能看着 但是无法选择。很坑爹！
⑺ value属性就是value，没有什么用处，给服务器传送的时候就是value。
呵呵!写了这么多没用的，接下来写Jquery了！
⑴ $("#select1").find("option:selected").text()
这个意思就是选择&select&标签，然后find选择 option标签中带有selected属性的标签，最后获取这个标签的text内容，文中就是获取：“冬瓜！“
⑵ $("#select1").val()
就是获取上面提到的value值了，但是有一点得注意：如果在所有option中有默认值selected属性时，这时这句代码的结果就是这个option的value值。如果所用option中都没有selected属性，则会显示第一个option的value值。如果要是没有设定value就会显示text()内容。
文中：显示结果是“4”，如果把这行的value=“4”去掉，就会显示：“冬瓜！”
⑶&&& $("#si").attr("value","donggua");
&&&&& $("#si ").val("donggua");
&&&&& $("#si ").get(0).value = "donggua";
这个就不解释了！就是给option赋值！
⑷ $("#select1").get(0).options[3].value
Get(0)获取这个select的DOM对象，对其进行操作。这是对其值进行操作，可以把value改为text，对其text进行操作！也可以把selected替换了，不过返回的是：false或者true
⑸ $("#select1 option[text='坑爹啊！']").attr("selected", true)
这个都明白吧，设置selected属性
⑹ $("#select1 ").append("&option value='8' selected='selected'&donggua&/option&");
Append都知道就是元素内部追加内容，这里我就是加入一行option的意思
⑺ $("#select1").prepend("&option value='9'&请选择&/option&");
Prepend是预设的意思，在这里也是添加一行option的意思，跟上面的区别是。Prepend是在select的第一位添加，而append是在最后一位添加。
⑻& $("#select1 option:last").remove();//删除最后一行
$("#select1 option[value='4']").remove();//删除第四行
$("#san").remove(); //删除第三行；
$("#select1 ").empty(); //删除全部option
……都是自己测试过的！
浏览 20224
FireFlyWithCat
浏览: 62752 次
来自: 北京
这个兼容不好吧
第二段我就不说了，就说说第一段吧。
你搞三次数据库查询有多大 ...
最好不要用if条件语句的多重嵌套,不管怎么写if条件语句的多重 ...
不建议在Grails这样使用Groovy