首先看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>
先来说说<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
……都是自己测试过的!
分享到:
相关推荐
下面小编就为大家分享一篇用jquery获取select标签中选中的option值及文本的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0)....
代码如下: var obj = document.getElementByIdx_x(”testSelect... // 选中值jQuery中获得选中select值第一种方式$(‘#testSelect option:selected’).text();//选中的文本$(‘#testSelect option:selected’) .val();/
获取选中option值 $(‘#selectList’).val(); //2.获取选中option的文本 $(‘#selectList :selected’).text(); //3.获取多个选中option值、文本 var foo = []; $(‘#multiple :selected’).each(function(i, ...
复制代码 代码如下:var obj = document.getElementById(“testSelect”)...jQuery中获得选中select值 第一种方式 复制代码 代码如下:$(‘#testSelect option:selected’).text();//选中的文本 $(‘#testSelect option:s
jQuery EasyUI 1.5.5 版本更新内容 Bug(修复) tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; layout:修复当鼠标...
jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...
代码如下://获取指定标签类型的节点数组 用例:GetTagNames(‘input,select,textarea’,document.getElementById(‘form’))function GetTagNames(tagnames,parEl){ //父节点未定义默认循document var parEl=...
基于DjangoORM的外键实现增加用户(含select标签) 作业 第20周 课程安排 上课内容回顾 Django一对多的创建 创建一对多表结构 获取单表单数据的三种方式 一对多跨表操作 一对多块表操作的的三种方式 增加一对多...
js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取
2010/12/30 v1.2版 改掉程序中所有的select标签 项目结构说明: \ ……\App_Data 项目数据库文件 (ACCESS2003) ……\bin\ …………\AjaxPro.2.dll .NET调用AJAX类库 …………\App_Code.dll 功能类文件 …………\...
参数值:true(保留样式链接link标签),false(清理样式链接link标签) internalScript:内部JS代码保留状态 参数值:true(保留内部JS代码),false(清理内部JS代码) inlineScript:内联JS代码保留状态 参数值:true(保留...
08 form表单之select标签 09 table标签 第38章 01 css的四种引入方式 02 css的四种基本选择器 03 css的组合选择器 04 css的属性选择器 05 css的伪类 06 css的选择器优先级 07 css的背景属性 第39章 01 css的文本...
使用基于文本的输入(text、textarea、e—mail、URL、number)143 使用checkbox输入144 使用radio输入145 使用select输入145 提供简单的字符串options145 利用ngOptions指令提供动态options146 select指令与空...
{1.2}数字表达方式}{17}{section.1.2} {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{subsection.1.3.1} {1.4}数据类型}{23}{section.1.4} {1.4.1}整数与浮点数}{23}{subsection.1.4.1} {1.4.1.1}浮点数原理}...
-修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...
-这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是Grid,TabStrip)都可以通过这种方式全屏。 -简单方便,示例可以参考 default.aspx 或者 other\...