JQuery 对 Select option 的操作

合集下载

jQuery课堂笔记(选择器)

jQuery选择器总结jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$("div") 选择所有的div标签元素，返回div元素数组$(".myClass") 选择使用myClass类的css的所有元素$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")层叠选择器：$("form input") 选择所有的form元素中的input元素$("#main > *") 选择id值为main的所有的子元素$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签基本过滤选择器：$("tr:first") 选择所有tr元素的第一个$("tr:last") 选择所有tr元素的最后一个$("input:not(:checked) + span")过滤掉：checked的选择器的所有的input元素$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素$("td:gt(4)") 选择td元素中序号大于4的所有td元素$("td:ll(4)") 选择td元素中序号小于4的所有的td元素$(":header")$("div:animated")内容过滤选择器：$("div:contains('John')") 选择所有div中含有John文本的元素$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组$("div:has(p)") 选择所有含有p标签的div元素$("td:parent") 选择所有的以td为父节点的元素数组可视化过滤选择器：$("div:hidden") 选择所有的被hidden的div元素$("div:visible") 选择所有的可视化的div元素属性过滤选择器：$("div[id]") 选择所有含有id属性的div元素$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素$("input[name^='news']") 选择所有的name属性以'news'开头的input元素$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素$("input[name*='man']") 选择所有的name属性包含'news'的input 元素$("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素子元素过滤选择器：$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")$("div span:first-child") 返回所有的div元素的第一个子节点的数组$("div span:last-child") 返回所有的div元素的最后一个节点的数组$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组表单元素选择器：$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button$(":text") 选择所有的text input元素$(":password") 选择所有的password input元素$(":radio") 选择所有的radio input元素$(":checkbox") 选择所有的checkbox input元素$(":submit") 选择所有的submit input元素$(":image") 选择所有的image input元素$(":reset") 选择所有的reset input元素$(":button") 选择所有的button input元素$(":file") 选择所有的file input元素$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域表单元素过滤选择器：$(":enabled") 选择所有的可操作的表单元素$(":disabled") 选择所有的不可操作的表单元素$(":checked") 选择所有的被checked的表单元素$("select option:selected") 选择所有的select 的子元素中被selected的元素选取一个 name 为”S_03_22″的input text框的上一个td的text值$(”input[@ name =S_03_22]“).parent().prev().text()名字以”S_”开始，并且不是以”_R”结尾的$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)一个名为 radio_01的radio所选的值$(”input[@ name =radio_01][@checked]“).val();$("A B") 查找A元素下面的所有子节点，包括非直接子节点$("A>B") 查找A元素下面的直接子节点$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点例子：找到表单中所有的 input 元素HTML 代码:<form><label>Name:</label><input name="name" /><fieldset><label>Newsletter:</label><input name="newsletter" /></fieldset></form><input name="none" />jQuery 代码:$("form input")结果:[ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点例子：匹配表单中所有的子级input元素。

select option

javascript之HTML（select option）详解一、基础理解:var e = document.getElementById("selectId");e. options= new Option("文本","值") ;//创建一个option对象,即在<select>标签中创建一个或多个<option value="值">文本</option>//options是个数组,里面可以存放多个<option value="值">文本</option>这样的标签1:options[ ]数组的属性:length属性---------长度属性selectedIndex属性--------当前被选中的框中的文本的索引值,此索引值是内存自动分配的(0,1,2,3.....)对应(第一个文本值,第二个文本值,第三个文本值,第四个文本值..........)2:单个option的属性(---obj.options[obj.selecedIndex]是指定的某个<option>标签,是一个---)text属性---------返回/指定文本value属性------返回/指定值，与<options value="...">一致。

index属性-------返回下标,selected 属性-------返回/指定该对象是否被选中.通过指定true 或者false，可以动态的改变选中项defaultSelected 属性-----返回该对象默认是否被选中。

true / false。

3:option的方法增加一个<option>标签-----obj.options.add(new("文本","值"));<增>删除一个<option>标签-----obj.options.remove(obj.selectedIndex)<删>获得一个<option>标签的文本-----obj.options[obj.selectedIndex].text<查> 修改一个<option>标签的值-----obj.options[obj.selectedIndex]=newOption("新文本","新值")<改>删除所有<option>标签-----obj.options.length = 0获得一个<option>标签的值-----obj.options[obj.selectedIndex].value注意:a:上面的写的是如这样类型的方法obj.options.function()而不写obj.funciton,是因为为了考虑在IE和FF 下的兼容,如obj.add()只能在IE中有效.b:obj.option中的option不需要大写,new Option中的Option需要大写二、应用<html><head><script language="javascript">function number(){var obj = document.getElementById("mySelect");//obj.options[obj.selectedIndex] = new Option("我的吃吃","4");//在当前选中的那个的值中改变//obj.options.add(new Option("我的吃吃","4"));再添加一个option//alert(obj.selectedIndex);//显示序号，option自己设置的//obj.options[obj.selectedIndex].text = "我的吃吃";更改值//obj.remove(obj.selectedIndex);删除功能}</script></head><body><select id="mySelect"><option>我的包包</option><option>我的本本</option><option>我的油油</option><option>我的担子</option></select><input type="button" name="button" value="查看结果"onclick="number();"></body></html>1.动态创建selectfunction createSelect(){var mySelect = document.createElement("select"); mySelect.id = "mySelect";document.body.appendChild(mySelect);}2.添加选项optionfunction addOption(){//根据id查找对象，var obj=document.getElementById('mySelect');//添加一个选项obj.add(new Option("文本","值")); //这个只能在IE中有效obj.options.add(new Option("text","value")); //这个兼容IE与firefox }3.删除所有选项optionfunction removeAll(){var obj=document.getElementById('mySelect');obj.options.length=0;}4.删除一个选项optionfunction removeOne(){var obj=document.getElementById('mySelect');//index,要删除选项的序号，这里取当前选中选项的序号var index=obj.selectedIndex;obj.options.remove(index);}5.获得选项option的值var obj=document.getElementById('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index].value;6.获得选项option的文本var obj=document.getElementById('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index].text;7.修改选项optionvar obj=document.getElementById('mySelect');var index=obj.selectedIndex; //序号，取当前选中选项的序号var val = obj.options[index]=new Option("新文本","新值");8.删除selectfunction removeSelect(){var mySelect = document.getElementById("mySelect"); mySelect.parentNode.removeChild(mySelect);}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html"><head><script language=JavaScript>function $(id){return document.getElementById(id)}function show(){var selectObj=$("area")var myOption=document.createElement("option") myOption.setAttribute("value","10")myOption.appendChild(document.createTextNode("上海")) var myOption1=document.createElement("option") myOption1.setAttribute("value","100")myOption1.appendChild(document.createTextNode("南京")) selectObj.appendChild(myOption)selectObj.appendChild(myOption1)}function choice(){var index=$("area").selectedIndex;var val=$("area").options[index].getAttribute("value")if(val==10){var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];remobj.removeNode(true)var sh=document.createElement("select")sh.add(new Option("浦东新区","101"))sh.add(new Option("黄浦区","102"))sh.add(new Option("徐汇区","103"))sh.add(new Option("普陀区","104")) $("context").appendChild(sh)}if(val==100){var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];remobj.removeNode(true)var nj=document.createElement("select")nj.add(new Option("玄武区","201"))nj.add(new Option("白下区","202"))nj.add(new Option("下关区","203"))nj.add(new Option("栖霞区","204")) $("context").appendChild(nj)}}function calc(){var x=$("context").childNodes.length-1;alert(x)}function remove(){var i=$("context").childNodes.length-1;var remobj=$("context").childNodes[i];remobj.removeNode(true)}</script><body><div id="context"><select id="area" onchange="choice()"></select></div><input type=button value="显示" onclick="show()"> <input type=button value="计算结点" onclick="calc()"> <input type=button value="删除" onclick="remove()"></body></html>根据这些东西,自己用JQEURY AJAX+JSON实现了一个小功能如下:JS代码:(只取了于SELECT相关的代码)/*** @description 构件联动下拉列表(用JQUERY 的AJAX配合JSON实现) * @prarm selectId 下拉列表的ID* @prarm method 要调用的方法名称* @prarm temp 此处存放软件ID* @prarm url 要跳转的地址*/function linkAgeJson(selectId,method,temp,url){$j.ajax({type: "get",//使用get方法访问后台dataType: "json",//返回json格式的数据url: url,//要访问的后台地址data: "method=" + method+"&temp="+temp,//要发送的数据success: function(msg){//msg为返回的数据，在这里做数据绑定var data = msg.lists;coverJsonToHtml(selectId,data);}});}/*** @description 将JSON数据转换成HTML数据格式* @prarm selectId 下拉列表的ID* @prarm nodeArray 返回的JSON数组**/function coverJsonToHtml(selectId,nodeArray){//get selectvar tempSelect=$j("#"+selectId);//clear select valueisClearSelect(selectId,'0');var tempOption=null;for(var i=0;i<nodeArray.length;i++){//create select OptiontempOption= $j('<optionvalue="'+nodeArray[i].dm+'">'+nodeArray[i].mc+'</option> '); //put Option to selecttempSelect.append(tempOption);}// 获取退化构件列表getCpgjThgl(selectId,'thgjDm');}/*** @description 清空下拉列表的值* @prarm selectId 下拉列表的ID* @prarm index 开始清空的下标位置*/function isClearSelect(selectId,index){var length=document.getElementById(selectId).options.length; while(length!=index){//长度是在变化的，因为必须重新获取length=document.getElementById(selectId).options.length;for(var i=index;i<length;i++)document.getElementById(selectId).options.remove(i);length=length/2;}}/*** @description 获取退化构件列表* @prarm selectId1 引用软件下拉列表的ID* @prarm selectId2 退化构件下拉列表的ID*/function getCpgjThgl(selectId1,selectId2){var obj1=document.getElementById(selectId1);//引用软件下拉列表var obj2=document.getElementById(selectId2);//退化构件下拉列表var len=obj1.options.length;//当引用软件列表长度等于1时返回，不做操作if(len==1){return false;}//清空下拉列表的值，两种方式都可以// isClearSelect(selectId2,'1');document.getElementById(selectId2).length=1;for(var i=0;i<len; i++){var option= obj1.options[i];//引用软件被选中项不加入if(i!=obj1.selectedIndex){//克隆OPTION并添加到SELECT中obj2.appendChild(option.cloneNode(true));}}}HTML代码:<TABLE width="100%" border=0 align="left" cellPadding=0 cellSpacing=1><tr><td class="Search_item_18"> <span class="Edit_mustinput">*</span>引用软件：</td><td class="Search_content_82"><input name="yyrjMc" id="yyrjMc" type="text" class="Search_input" tabindex="3" size="30" ><input name="yyrjDm" id="yyrjDm" type="hidden" ><input type="button" class="Search_button_select"onClick="linkAgeTree('linkage','yyrjtree','yyrjMc','yyrjDm','linkageTree','1' );" value="选择..."></td></tr><tr><td class="Search_item"> <span class="Edit_mustinput">*</span>引用分版：</td><td class="Search_content" id="yyfb"><select name="yyfbDm" style="width:160" id="yyfbDm"onChange="getCpgjThgl('yyfbDm','thgjDm')"></select></td></tr><tr><td class="Search_item">退化构件：</td><td class="Search_content" id="thgj"><select name="thgjDm" style="width:160" id="thgjDm"><option value="-1" selected>无</option></select></td></tr></TABLE>。

jQuery对select和option操作小结

1.遍历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''>UPSGround</option>").appendTo($("select[@name=ISHIPTYPE]"));}}2.取得下拉選單的選取值$(#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 元素；可以看出有@开头的就表示后面跟的是属性。

select2 选择后回调的参数

select2 选择后回调的参数`select2` 是一个流行的 jQuery 插件，用于创建美观的、交互式的下拉选择框。

当用户从下拉列表中选择一个选项时，你可以使用回调函数来处理这个事件。

在 `select2` 中，选择后的回调函数通常接收一个参数，这个参数是一个对象，包含了与选择相关的各种信息。

以下是一些常用的属性：1. `id`: 被选择的元素的 ID。

2. `element`: 被选择的 DOM 元素。

3. `name`: 被选择的元素的 name 属性值。

4. `selected`: 一个布尔值，表示该选项是否被选中。

5. `deselected`: 一个布尔值，表示该选项是否被取消选中。

6. `disabled`: 一个布尔值，表示该选项是否被禁用。

7. `removed`: 一个布尔值，表示该选项是否被移除。

8. `choice`: 包含了关于这个选项的所有信息的对象。

9. `data`: 与该选项关联的数据对象。

10. `results`: 如果这个元素是一个搜索结果，这是一个包含了所有搜索结果的数组。

以下是一个简单的示例，展示了如何使用这些参数：```javascript$('mySelect').select2({onSelect: function(e) {('选中的 ID:', );('选中的元素:', );('选中的 name:', );('是否被选中:', );('是否被取消选中:', );('是否被禁用:', );('是否被移除:', );('其他信息:', );('关联数据:', );}});```注意：`select2` 的版本和配置可能会影响可用的回调和参数，所以建议查看你正在使用的版本的官方文档以获取最准确的信息。

jquery获取表单数据的方法

标题：JQuery获取表单数据的方法正文：随着互联网技术的不断发展，前端开发在Web应用程序中扮演着愈发重要的角色。

JQuery作为一款优秀的前端开发框架，其强大的功能和便捷的操作方式受到了广大开发者的青睐。

在Web开发中，表单是不可或缺的组件之一，而JQuery也提供了丰富的API来获取表单数据，本文将介绍JQuery获取表单数据的几种常用方法。

一、使用val()方法获取表单数据JQuery中的val()方法可用于获取表单元素的值，包括input、select、textarea等。

通过选取相应的表单元素，可以直接调用val()方法来获取其值。

示例代码如下：```javascriptvar username = $('#username').val(); // 获取输入框中的值var gender = $('input:radio[name="gender"]:checked').val(); //获取单选框的值var hobby =$('input:checkbox[name="hobby"]:checked').map(function(){ return $(this).val();}).get(); // 获取复选框的值var city = $('#city option:selected').val(); // 获取下拉框选中的值var intro = $('#intro').val(); // 获取文本域的值```二、使用serialize()方法获取表单数据JQuery中的serialize()方法可以将表单元素的值序列化成字符串，以便于通过Ajax进行传输或提交表单。

示例代码如下：```javascriptvar formData = $('#form').serialize(); // 序列化表单数据```三、使用serializeArray()方法获取表单数据serializeArray()方法将表单元素的值序列化成一个数组，每个元素是一个包含name和value属性的对象。

select2的用法

select2的用法摘要：1.Select2 简介2.Select2 的基本用法3.Select2 的选项配置4.Select2 的样式定制5.Select2 的示例代码正文：【1.Select2 简介】Select2 是一个基于jQuery 的下拉列表选择插件，为用户提供了一个美观且实用的选择器。

Select2 可以轻松地与现有的HTML 表单元素集成，并提供了丰富的配置选项，使得用户可以根据需求进行定制。

【2.Select2 的基本用法】要使用Select2，首先需要引入Select2 的CSS 和JavaScript 文件。

然后，通过以下步骤为HTML 中的<select>元素添加Select2 插件：1.为<select>元素添加一个独特的ID。

2.在<select>元素上添加data-select2 属性。

3.将Select2 的CSS 文件引入到HTML 文件中。

4.将Select2 的JavaScript 文件引入到HTML 文件中。

例如：```html<select id="mySelect" data-select2></select><link rel="stylesheet" href="path/to/select2.min.css"><script src="path/to/select2.min.js"></script>```【3.Select2 的选项配置】Select2 提供了丰富的配置选项，可以通过JavaScriptAPI 进行设置。

以下是一些常用的配置选项：1.`placeholder`：指定提示文本。

2.`allowClear`：是否允许用户清空选择器。

3.`multiple`：是否允许多选。

Jquery操作select

{
jQuery(this).get(0).options[i].selected = true;
isExist = true;
break;
}
}
if(!isExist)
else{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
//获得当前选中项的值
{
alert("下拉框中不存在该项");
}
}
//设置选中指定索引项
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
jQuery.fn.removeItem = function(value)
{
if(this.isExistItem(value))
{
var count = this.size();
for(var i=0;i<count;i++)
jQuery.fn.getSelectedValue = function(){
if(this.size() =ห้องสมุดไป่ตู้ 0)
return "下拉框中无选中值";
else
return jQuery(this).val();
}
}
//删除select中选定的项
jQuery.fn.removeSelected = function()
{

下拉select用法

下拉select用法1.引言1.1 概述下拉选择框（select）是一种常见的表单元素，用于提供用户选择的选项。

它允许用户从一个固定的选项列表中选择一个或多个值。

下拉选择框常用于网页表单中，用于收集用户输入的信息，例如国家、城市、日期等。

在Web开发中，下拉选择框的使用非常普遍，因为它提供了用户友好的界面和灵活的选项。

通过下拉选择框，用户可以从预定义的选项中直接选择，而不需要手动输入数据。

这不仅提高了用户的操作效率，还减少了输入错误的可能性。

下拉选择框通常由一个可点击的文本框和一个下拉箭头组成。

当用户点击箭头或者输入框，会展开一个下拉列表，用户可以从中选择一个或多个选项。

选择后，选项的值将显示在文本框中。

除了展示选项，下拉选择框还可以显示默认选项或者当前选中的值。

除了基本的用法，下拉选择框还具有丰富的属性和选项设置，以满足不同的需求。

例如，可以设置下拉选择框的尺寸、宽度、颜色等外观样式。

还可以设置选项的默认值、禁用某些选项、设置多选等功能。

这些属性和选项使得下拉选择框具有更强的扩展性和可定制性。

总之，下拉选择框是一种实用且常用的表单元素，在各种Web应用中都得到了广泛应用。

它为用户提供了方便快捷的选择方式，同时也为开发者提供了灵活多样的定制选项。

在接下来的文章中，我们将详细探讨下拉选择框的基本用法、常用属性和选项，以及它在未来的发展方向。

1.2文章结构文章结构是指一篇文章整体的组织框架和分布方式。

它包括引言、正文和结论三个主要部分，每个部分又可以细化为若干个小节。

在本篇文章中，结构如下：1. 引言1.1 概述1.2 文章结构1.3 目的2. 正文2.1 下拉select的基本用法2.2 下拉select的属性和选项3. 结论3.1 总结下拉select的用法3.2 未来发展方向引言部分主要是对文章主题进行简要说明，概括性地介绍下拉select 的用途和重要性，引起读者的兴趣，并明确文章的目的和结构。

jquery获得select option的值和对select option的操作

获取Select ：获取select 选中的text :$("#ddlRegType").find("option:selected").text();获取select选中的value:$("#ddlRegType ").val();获取select选中的索引:$("#ddlRegType ").get(0).selectedIndex;设置select:设置select 选中的索引：$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值设置select 选中的value：$("#ddlRegType ").attr("value","Normal“);$("#ddlRegType ").val("Normal");$("#ddlRegType ").get(0).value = value;设置select 选中的text:var count=$("#ddlRegType option").length;for(var i=0;i<count;i++){ if($("#ddlRegType ").get(0).options[i].text == text){$("#ddlRegType ").get(0).options[i].selected = true;break;}}$("#select_id option[text='jQuery']").attr("selected", true);设置select option项:$("#select_id").append("<option value=’Value’>Text</option>");//添加一项option $("#select_id").prepend("<option value=’0′>请选择</option>"); //在前面插入一项option $("#select_id option:last").remove(); //删除索引值最大的Option$("#select_id option[index='0']").remove();//删除索引值为0的Option$("#select_id option[value='3']").remove(); //删除值为3的Option$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option清空Select:$("#ddlRegType ").empty();jquery获得值：.val().text()设置值.val(‘在这里设置值’)$("document").ready(function(){$("#btn1").click(function(){$("[name='checkbox']").attr("checked",’true’);//全选})$("#btn2").click(function(){$("[name='checkbox']").removeAttr("checked");//取消全选})$("#btn3").click(function(){$("[name='checkbox']:even").attr("c hecked",’true’);//选中所有奇数})$("#btn4").click(function(){$("[name='checkbox']").each(function(){//反选if($(this).attr("checked")){$(this).removeAttr("checked");}else{$(this).attr("checked",’true’);}})})$("#btn5").click(function(){//输出选中的值var str="";$("[name='checkbox'][checked]").each(function(){str+=$(this).val()+"\r\n";//alert($(this).val());})alert(str);})})。

jQuery获取Select选择的Text和Value

1.jQuery获取Select选择的Text和Value:2.语法解释：3. 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发4. 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text5. 3. var checkValue=$("#select_id").val(); //获取Select选择的Value6. 4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值7. 5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值8.jQuery设置Select选择的 Text和Value:9.语法解释：10.1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中11.2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中12.3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中13.jQuery添加/删除Select的Option项：14.语法解释：15.1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)16.2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)17.3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)18.4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)19.5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option20.5. $("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option21.jquery radio取值，checkbox取值，select取值，radio选中，checkbox选中，select选中，及其相关22.获取一组radio被选中项的值23.var item = $('input[@name=items][@checked]').val();24.获取select被选中项的文本25.var item = $("select[@name=items] option[@selected]").text();26.select下拉框的第二个元素为当前选中值27.$('#select_id')[0].selectedIndex = 1;28.radio单选组的第二个元素为当前选中值29.$('input[@name=items]').get(1).checked = true;30.31.获取值：32.33.文本框，文本区域：$("#txt").attr("value")；34.多选框 checkbox：$("#checkbox_id").attr("value")；35.单选组radio： $("input[@type=radio][@checked]").val();36.下拉框select： $('#sel').val();37.38.控制表单元素：39.文本框，文本区域：$("#txt").attr("value",'');//清空内容40.$("#txt").attr("value",'11');// 填充内容41.42.多选框checkbox： $("#chk1").attr("checked",'');//不打勾43.$("#chk2").attr("checked",true);// 打勾44.if($("#chk1").attr('checked')==undefined) //判断是否已经打勾45.46.单选组 radio： $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项47.下拉框 select： $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项48.$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option49.$("#sel").empty()；// 清空下拉框50.51.----------------------------------------------------------------------------------------------------52.53.54.55.//遍历option和添加、移除option56.function changeShipMethod(shipping){57.var len = $("select[@name=ISHIPTYPE] option").length58.if(shipping.value != "CA"){59.$("select[@name=ISHIPTYPE] option").each(function(){60.if($(this).val() == 111){61.$(this).remove();62.}63.});64.}else{65.$("<option value='111'>UPS Ground</option>").appendTo($("select[@name=ISHIPTYPE]"));66.}67.}68.69.70.//取得下拉選單的選取值71.72.$(#testSelect option:selected').text();73.或$("#testSelect").find('option:selected').text();74.或$("#testSelect").val();75.1,下拉框:76.77.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)78.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值79.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值80.$("#select").empty();//清空下拉框 //$("#select").html('');81.$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option82.83.稍微解释一下:84.1.select[@name='country'] option[@selected] 表示具有name 属性，85.并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；86.可以看出有@开头的就表示后面跟的是属性。

jQuery实现监听下拉框选中内容发生改变操作示例

jQuery实现监听下拉框选中内容发⽣改变操作⽰例本⽂实例讲述了jQuery实现监听下拉框选中内容发⽣改变操作。

分享给⼤家供⼤家参考，具体如下：jQuery代码部分：<script>$(document).ready(function(){var defaultId = "${defaultSelected}";var defaultTime = "${timeName}";$("select option").each(function(){if($(this).val()==defaultId || $(this).val()==defaultTime){$(this).attr("selected","selected");}});$("#all").change(function(){//alert(document.getElementById("allItem").selected);if(document.getElementById("allItem").selected == true){$("#timeText").hide();$("#timeSelect").hide();}else{$("#timeText").show();$("#timeSelect").show();}});});</script>HTML部分：<form action="${baseUrl}/report/issueStatus.shtml"><span>Select a project:</span><select name="selectedProId" id="all"><c:forEach items="${projectNameId}" var="pi"><option value="${pi.value}">${pi.key}</option></c:forEach><option value="-1" id="allItem">All</option></select><span id="timeText">Select a time horizon:</span><select name="timeHorizon" id="timeSelect"><option value="Week">Last week</option><option value="Month">Last month</option></select><button type="submit" id="submit">search</button></form>更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

两个多选select（multiple左右）添加、删除选项和取值实例

两个多选select（multiple左右）添加、删除选项和取值实例不知道怎么描述，就是有两个select下拉，做成⽂本域那样的，可以从⼀侧的结果集中选择值，添加到另⼀侧中；另⼀侧删掉后，值⼜重新到结果集那边了。

直接看范例演⽰吧，相信你以前后者以后会⽤到的！不多说了，上代码：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>select</title><script type="text/javascript" src="jquery.min.js"></script><script>$(function(){$("#car_type_list").dblclick(function(){var s_val = this.value;if(s_val == '') return;$(this).children("option[value='"+s_val+"']").remove();$("#car_type").append('<option value="'+s_val+'">'+s_val+'</option>');//以下代码作⽤是将选择到的值备份到⼀个id为car_type_val的input中，可以进⾏传值$("#car_type_val").val($("#car_type_val").val()+s_val+"@");alert($("#car_type_val").val())});$("#car_type").dblclick(function(){var s_val = this.value;if(s_val == '') return;$(this).children("option[value='"+s_val+"']").remove();$("#car_type_list").append('<option value="'+s_val+'">'+s_val+'</option>');var now_val = $("#car_type_val").val();now_val = now_val.replace(s_val+"@","");$("#car_type_val").val(now_val);alert($("#car_type_val").val())});})</script></head><body><input type="hidden" name="car_type" value="" id="car_type_val" /><br/><select multiple="multiple" style="min-width:200px; min-height:80px;" id="car_type"></select><><select multiple="multiple" style="min-width:200px; min-height:80px;" id="car_type_list"><option value="2014森林⼈系列">2014森林⼈系列</option><option value="2014傲虎系列">2014傲虎系列</option><option value="2014⼒狮系列">2014⼒狮系列</option><option value="2014XV系列">2014XV系列</option><option value="WRX STI">WRX STI</option><option value="SUBARU BRZ">SUBARU BRZ</option><option value="TRIBECA">TRIBECA</option></select></body></html>其中“<input type="hidden" name="car_type" value="" id="car_type_val" />”这个的作⽤相当于是⼀个容器，提交表单的时候可以传值。

select2多选用法

select2多选用法
select2是一个基于jQuery的下拉框增强插件，它提供了丰富的功能和灵活的配置选项，其中包括多选功能。

在使用select2进行多选时，首先需要确保引入了select2的相关文件，包括CSS和JavaScript文件。

然后，你需要将原始的select下拉框元素初始化为select2插件，以便启用其多选功能。

在HTML中，你需要将原始的select标签的multiple属性设置为true，以便允许多选。

然后，在JavaScript中，通过调用select2()方法来初始化select2插件，并在初始化时配置multiple: true。

这样就可以实现多选功能了。

另外，你还可以通过配置select2的其他选项来定制多选功能的行为，比如设置最大可选项数、自定义选择框样式、搜索功能等等。

此外，select2还提供了事件回调函数，你可以通过这些回调函数来处理多选过程中的各种交互行为，比如选中、取消选中、搜索等。

总之，使用select2进行多选功能的实现并不复杂，只需要正
确配置插件并了解其相关选项和事件即可。

希望这些信息能够帮助你更好地理解select2的多选用法。

jquery操作select取值赋值与设置选中实例

jquery操作select取值赋值与设置选中实例本节内容：jquery实现select下拉框的取值与赋值，设置选中的⽅法⼤全。

⽐如<select class="selector"></select>1、设置value为pxx的项选中$(".selector").val("pxx");2、设置text为pxx的项选中$(".selector").find("option[text='pxx']").attr("selected",true);这⾥有⼀个中括号的⽤法，中括号⾥的等号的前⾯是属性名称，不⽤加引号。

很多时候，中括号的运⽤可以使得逻辑变得很简单。

3、获取当前选中项的value$(".selector").val();4、获取当前选中项的text$(".selector").find("option:selected").text();这⾥⽤到了冒号，掌握它的⽤法并举⼀反三也会让代码变得简洁。

很多时候⽤到select的级联，即第⼆个select的值随着第⼀个select选中的值变化。

这在jquery中是⾮常简单的。

例如：$(".selector1").change(function(){// 先清空第⼆个$(".selector2").empty();// 实际的应⽤中，这⾥的option⼀般都是⽤循环⽣成多个了var option = $("<option>").val(1).text("pxx");$(".selector2").append(option);});Js操作Select⼤全判断select选项中是否存在Value="paraValue"的Item向select选项中加⼊⼀个Item从select选项中删除⼀个Item删除select中选中的项修改select选项中 value="paraValue"的text为"paraText"设置select中text="paraText"的第⼀个Item为选中设置select中value="paraValue"的Item为选中得到select的当前选中项的value得到select的当前选中项的text得到select的当前选中项的Index清空select的项js 代码1、判断select选项中是否存在Value="paraValue"的Itemfunction jsSelectIsExitItem(objSelect, objItemValue) {var isExit = false;for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].value == objItemValue) {isExit = true;break;}return isExit;}2、向select选项中加⼊⼀个Itemfunction jsAddItemToSelect(objSelect, objItemText, objItemValue) {//判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {alert("该Item的Value值已经存在");} else {var varItem = new Option(objItemText, objItemValue);objSelect.options.add(varItem);alert("成功加⼊");}}3、从select选项中删除⼀个Itemfunction jsRemoveItemFromSelect(objSelect, objItemValue) {//判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].value == objItemValue) {objSelect.options.remove(i);break;}}alert("成功删除");} else {alert("该select中不存在该项");}}4、删除select中选中的项function jsRemoveSelectedItemFromSelect(objSelect) {var length = objSelect.options.length - 1;for(var i = length; i >= 0; i--){if(objSelect[i].selected == true){objSelect.options[i] = null;}}}5、修改select选项中 value="paraValue"的text为"paraText" function jsUpdateItemToSelect(objSelect, objItemText, objItemValue) { //判断是否存在if (jsSelectIsExitItem(objSelect, objItemValue)) {for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].value == objItemValue) {objSelect.options[i].text = objItemText;break;}}alert("成功修改");} else {alert("该select中不存在该项");}}6、设置select中text="paraText"的第⼀个Item为选中function jsSelectItemByValue(objSelect, objItemText) {//判断是否存在var isExit = false;for (var i = 0; i < objSelect.options.length; i++) {if (objSelect.options[i].text == objItemText) {objSelect.options[i].selected = true;isExit = true;break;}//Show出结果if (isExit) {alert("成功选中");} else {alert("该select中不存在该项");}}7、设置select中value="paraValue"的Item为选中document.all.objSelect.value = objItemValue;8、得到select的当前选中项的valuevar currSelectValue = document.all.objSelect.value;9、得到select的当前选中项的textvar currSelectText = document.all.objSelect.options[document.all.objSelect.selectedIndex].text;10、得到select的当前选中项的Indexvar currSelectIndex = document.all.objSelect.selectedIndex;11、清空select的项document.all.objSelect.options.length = 0;以上这篇jquery操作select取值赋值与设置选中实例就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

多选下拉框jquery.multiple.select的使用

多选下拉框jquery.multiple.select的使⽤介绍:多选下拉选择插件是jQuery插件选择复选框，多元素的。

有单选、多选还有其他分组多选、过滤条件选择等等。

相关API及demo:/p/multiple-select/docs/#multiple-select以下是项⽬中曾⽤的demo:1.⾸先引⽤jquery.multiple.select.js、multiple-select.css2.在页⾯select下拉列表⾥⾯加⼀个multiple="multiple"<select name="nimbusHost" id="nimbusHost" multiple="multiple"><c:forEach items="${stormIps}" var="item"><option value="${item.value}">${item.code}</option></c:forEach></select>3.在页⾯初始化的时候，要在js⾥⾯加⼀段代码:<%--这个是默认选中的--%>var numbusIps='${queryStormBaseConfInfo.nimbusHost}';$('#nimbusHost').multipleSelect({width: '300px',single:true//单选，去掉single就是多选}).multipleSelect('setSelects',[numbusIps]);<%--这个是默认不选中的--%>var numbusIps='${queryStormBaseConfInfo.nimbusHost}';$('#nimbusHost').multipleSelect({width: '300px',single:true//单选，去掉single就是多选});4.提交的时候直接⽤var nimbusHost=$("#nimbusHost").val();就可以得到多选下拉框选中的值。

jQueryChosen通用初始化

jQueryChosen通⽤初始化no_results_text："xxxxx"⽆搜索结果时显⽰的⽂本allow_single_deselect：true 是否允许取消选择disable_search: true 是否有搜索框出现max_selected_options：当select为多选时，最多选择个数/* 功能: Chosen通⽤初始化* 创建⼈：Brian 创建时间：2016-12-13*/(function ($j) {var chosenTool = function (el, options) {this.opts = options;this.chosenInit();this.chose_get_init();this.chose_mult_set_init(this.opts.hidClassName);this.clickEvent();return this;}chosenTool.opts = {selectId: '',//selectIdhidClassName: '',//隐藏域Classplaceholdertxt: '',//select中placeholder⽂字noresulttxt: '',//输⼊的名称未查到时显⽰的⽂字dataJson: ''//数据源};$j.fn.myChosenTool = function (opt) {var value,args = Array.prototype.slice.call(arguments, 1);var $jthis = $j(this),data = $jthis.data('chosenTool'),options = $j.extend({}, chosenTool.opts, $jthis.data(),typeof option === 'object' && option);if (typeof option === 'string') {//判断⽤户调⽤的⽅法是否存在//if ($j.inArray(option, allowedMethods) < 0) {// throw new Error("Unknown method: " + option);//}if (!data) {return;}value = data[option].apply(data, args);if (option === 'destroy') {$jthis.removeData('chosenTool');}}/*插件外部调⽤插件内部的⽅法需要修改成下⾯形式*///if (typeof opt === 'string') {// if (!data) {// return;// }// value = data[opt].apply(data, args);// if (opt === 'destroy') {// $jthis.removeData('chosenTool');// }//}if (!data) {opt["selectId"] = $j(this).attr("id");$jthis.data('chosenTool', (data = new chosenTool(this, opt)));}console.log(data);return typeof value === 'undefined' ? this : value;};chosenTool.prototype.clickEvent = function () {var _this = this;$j("#" + this.opts.selectId).on("change", function () {_this.chose_get_value();});};/*下拉框初始化⽅法*/chosenTool.prototype.selectInfoInit = function () {var proOPts = "";this.opts.dataJson = $j.parseJSON(this.opts.dataJson);$j.each(this.opts.dataJson, function (index, item) {proOPts += "<option value='" + item.ValueField + "'>" + item.TextField + "</option>";});$j("#" + this.opts.selectId).append(proOPts);//初始化chosen$j("#" + this.opts.selectId).chosen({allow_single_deselect: true, //是否允许取消选择placeholder_text_multiple: this.opts.placeholdertxt, //多选框没有选中任何值的时候显⽰的⽂字no_results_text: this.opts.noresulttxt,//⽆搜索结果时显⽰的⽂本search_contains: true//是否⽀持模糊搜索});};/*对象初始化⽅法*/chosenTool.prototype.chosenInit = function () {this.selectInfoInit();};//私有⽅法，检测参数是否合法chosenTool.prototype.isValid = function () {return !this.options || (this.options && typeof this.options === "object") ? true : false;};//数据同步chosenTool.prototype.chose_get_init = function () {var selectId = this.opts.selectId;$j("#" + this.opts.selectId).chosen().change(function () {$j("#" + selectId).trigger("liszt:updated");//更新下拉框});};//单选select value获取chosenTool.prototype.chose_get_value = function () {var selectVal = $j("#" + this.opts.selectId).val();$j("." + this.opts.hidClassName).val(selectVal);};//单选select value获取chosenTool.prototype.chose_mult_set_init = function () {var values = $j("." + this.opts.hidClassName).val();if (values && values.indexOf(',') > 0) {var arr = values.split(',');var length = arr.length;var value = '';for (i = 0; i < length; i++) {value = arr[i];$j("#" + this.opts.selectId + " [value='" + value + "']").attr('selected', 'selected');}} else {$j("#" + this.opts.selectId + " [value='" + values + "']").attr('selected', 'selected');}$j("#" + this.opts.selectId).trigger("liszt:updated");};//select text获取，多选时请注意chosenTool.prototype.chose_get_text = function () {return $j("#" + this.opts.selectId + " option:selected").text();};})(jQuery);以上所述是⼩编给⼤家介绍的jQuery Chosen通⽤初始化，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

jQuery获取option的一些常用方法

jQuery获取option的⼀些常⽤⽅法jQuery的⼀些⽅法理出⼀些常⽤的⽅法://获取第⼀个option的值$('#test option:first').val();//最后⼀个option的值$('#test option:last').val();//获取第⼆个option的值$('#test option:eq(1)').val();//获取选中的值$('#test').val();$('#test option:selected').val();//设置值为2的option为选中状态$('#test').attr('value','2');//设置第⼀个option为选中$('#test option:last').attr('selected','selected');$("#test").attr('value' , $('#test option:last').val());$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());//获取select的长度$('#test option').length;//添加⼀个option$("#test").append("ff");$("ff").appendTo("#test");//添除选中项$('#test option:selected').remove();//指定项选中$('#test option:first').remove();//指定值被删除$('#test option').each(function(){if( $(this).val() == '5'){$(this).remove();}});$('#test option[value=5]').remove();//获取第⼀个Group的标签$('#test optgroup:eq(0)').attr('label');//获取第⼆group下⾯第⼀个option的值$('#test optgroup:eq(1) :option:eq(0)').val();获取select中选择的text与value相关的值获取select选择的Text : var checkText=$("#slc1").find("option:selected").text();获取select选择的value:var checkValue=$("#slc1").val();获取select选择的索引值: var checkIndex=$("#slc1 ").get(0).selectedIndex;获取select最⼤的索引值: var maxIndex=$("#slc1 option:last").attr("index");设置select选择的Text和Value设置select索引值为1的项选中：$("#slc1 ").get(0).selectedIndex=1;设置select的value值为4的项选中： $("#slc1 ").val(4);设置select的Text值为JQuery的选中：$("#slc1 option[text='jQuery']").attr("selected", true);PS：特别要注意⼀下第三项的使⽤哦。

jquery及原生js获取select下拉框选中的值示例

这篇文章主要介绍了javascript编程开发中取色器及封装函数结合实例形式分析了javascript封装函数及数值运算页面元素动态操作实现取色器功能相关技巧需要的朋友可以参考下
jquery及原生 js获取 select下拉框选中的值示例
现在有一id=test的下拉框，怎么拿到选中的那个值呢？分别使用javascript原生的方法和jquery方法复制代码代码如下: <select id="test" name=""> <option value="1">text1</option> <option value="2">text2</option> </select>
1:var options=$("#test option:selected"); //获取选中的项 2:alert(options.val()); //拿到选中项的值 3:alert(options.text()); //拿到选中项的文本
1:拿到sห้องสมุดไป่ตู้lect对象： var myselect=document.getElementById("test"); 2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index 3:拿到选中项options的value： myselect.options[index].value; 4:拿到选中项options的text： myselect.options[index].text;