`
FireFlyWithCat
  • 浏览: 87288 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery获取select标签的值、文本方式

阅读更多
首先看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
……都是自己测试过的!
3
8
分享到:
评论

相关推荐

    用jquery获取select标签中选中的option值及文本的示例

    下面小编就为大家分享一篇用jquery获取select标签中选中的option值及文本的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    jQuery取得设置清空select选择的文本与值

    获取select : 获取select 选中的 text : $("#ddlregtype").find("option:selected").text(); 获取select选中的 value: $("#ddlregtype ").val(); 获取select选中的索引: $("#ddlregtype ").get(0)....

    js获取select标签选中值的两种方式

    代码如下: var obj = document.getElementByIdx_x(”testSelect... // 选中值jQuery中获得选中select值第一种方式$(‘#testSelect option:selected’).text();//选中的文本$(‘#testSelect option:selected’) .val();/

    JQuery 操作select标签实现代码

    获取选中option值 $(‘#selectList’).val(); //2.获取选中option的文本 $(‘#selectList :selected’).text(); //3.获取多个选中option值、文本 var foo = []; $(‘#multiple :selected’).each(function(i, ...

    javascript获取select标签选中的值

    复制代码 代码如下:var obj = document.getElementById(“testSelect”)...jQuery中获得选中select值 第一种方式 复制代码 代码如下:$(‘#testSelect option:selected’).text();//选中的文本 $(‘#testSelect option:s

    jquery-easyui-EDT-1.5.5.7z

    jQuery EasyUI 1.5.5 版本更新内容 Bug(修复) tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; combo:修复当设置了一个较大的'delay'值的时候下拉面板可能不会被隐藏的问题; layout:修复当鼠标...

    jQuery完全实例.rar

    jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...

    js获取多个tagname的节点数组

    代码如下://获取指定标签类型的节点数组 用例:GetTagNames(‘input,select,textarea’,document.getElementById(‘form’))function GetTagNames(tagnames,parEl){ //父节点未定义默认循document var parEl=...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    基于DjangoORM的外键实现增加用户(含select标签) 作业 第20周 课程安排 上课内容回顾 Django一对多的创建 创建一对多表结构 获取单表单数据的三种方式 一对多跨表操作 一对多块表操作的的三种方式 增加一对多...

    js实现input输入框输入信息后出现下拉选择框

    js实现input输入框输入信息后出现下拉选择框,下拉框的数据源可以使根据输入的值从数据库中动态获取

    ASP.NET 网页抓取WEB版

    2010/12/30 v1.2版 改掉程序中所有的select标签 项目结构说明: \ ……\App_Data 项目数据库文件 (ACCESS2003) ……\bin\ …………\AjaxPro.2.dll .NET调用AJAX类库 …………\App_Code.dll 功能类文件 …………\...

    xheditor-1.1.14

    参数值:true(保留样式链接link标签),false(清理样式链接link标签) internalScript:内部JS代码保留状态 参数值:true(保留内部JS代码),false(清理内部JS代码) inlineScript:内联JS代码保留状态 参数值:true(保留...

    python入门到高级全栈工程师培训 第3期 附课件代码

    08 form表单之select标签 09 table标签 第38章 01 css的四种引入方式 02 css的四种基本选择器 03 css的组合选择器 04 css的属性选择器 05 css的伪类 06 css的选择器优先级 07 css的背景属性 第39章 01 css的文本...

    精通AngularJS part1

    使用基于文本的输入(text、textarea、e—mail、URL、number)143 使用checkbox输入144 使用radio输入145 使用select输入145 提供简单的字符串options145 利用ngOptions指令提供动态options146 select指令与空...

    Java学习笔记-个人整理的

    {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}浮点数原理}...

    ExtAspNet_v2.3.2_dll

    -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的BUG(feedback:Violet)。 -Button控件将不再自动拥有display:inline属性,如果希望两个按钮在一行显示,请为第一个按钮设置CssStyle=...

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -这样所有需要占据全屏的Panel(不管你是Accordion,Panel,ContentPanel,Form,GroupPanel,SimpleForm,Tree还是Grid,TabStrip)都可以通过这种方式全屏。 -简单方便,示例可以参考 default.aspx 或者 other\...

Global site tag (gtag.js) - Google Analytics