`
FireFlyWithCat
  • 浏览: 88322 次
  • 性别: 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标签的值

    ### Jquery 获取 Select 标签的值 在前端开发中,使用 jQuery 框架能够极大地简化 DOM 操作,使得获取或设置 HTML 元素的属性变得更加容易。本篇文章将详细介绍如何利用 jQuery 来获取 Select 标签的值以及相关的...

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

    - 方法一:通过id选择器获取select标签,然后使用":selected"伪类选择器找到当前选中的option,接着使用.text()方法获取选中的option的文本内容。代码为`$("#sel option:selected").text();` - 方法二:通过id选择...

    jQuery获取Select标签的手册

    1. **获取Select标签的value值**: 要获取`Select`标签中当前选中的选项的`value`属性值,可以使用`$('select').val()`。例如: ```javascript var selectedValue = $('select').val(); ``` 这将返回`&lt;select&gt;`...

    Jquery操作select标签例子

    本文将详细讲解如何使用jQuery来管理HTML中的`&lt;select&gt;`元素,包括选择、更改选项,获取选中项的文本、值和索引,以及清除、删除和添加选项。 首先,要进行jQuery操作,需要在HTML文档中引入jQuery库。在这个例子中...

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

    `$("#select_id option").remove()`删除文本值为4的选项。 最后,清空整个`&lt;select&gt;`: ```javascript $("#ddlregtype").empty(); ``` 这将移除`&lt;select&gt;`内的所有`&lt;option&gt;`。 在实际应用中,可能需要处理用户...

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

    在JavaScript和jQuery中,获取`&lt;select&gt;`标签中选中选项的值是常见的操作,尤其在处理表单数据时。以下将详细介绍这两种方法,并提供一些相关的扩展知识。 ### JavaScript 获取选中值 #### 方法一:原生 ...

    JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

    selected').val()获取的,其中$(this)代表当前发生change事件的select标签元素,.children('option:selected')选择当前被选中的option子元素,.val()方法则获取该option元素的value属性值。 紧接着,在弹出警告框后...

    jquery.editable-select

    `jquery.editable-select` 是一个基于 jQuery 的插件,它为HTML的选择元素提供了一种可编辑的、下拉式选择的交互方式。这个插件旨在增强用户体验,让用户能够直接在下拉列表中输入搜索关键字,而不是只能从预设的...

    JQuery SELECT单选模拟jQuery.select.js

    3. **宽度调整**: 插件对select元素宽度的获取方式做了小调整,优先使用CSS样式中的宽度,其次才是计算宽度,并考虑了浏览器默认宽度,提供了一个合理的默认宽度值。 ### 实现原理 插件使用了jQuery的fn扩展方法来...

    jQuery获取select选中的option的value值实现方法

    为了更详细地说明知识点,这里再补充一些关于如何使用jQuery获取select选中option的value值的其他相关方法和注意事项: 1. 当页面加载完成后,通常需要确保在文档完全加载之后再进行元素操作,因此获取select元素的...

    JQuery插件searchSelect

    **jQuery插件searchSelect详解** `searchSelect`是一款基于jQuery的实用插件,它为下拉选择框(select元素)提供了搜索功能,极大地提升了用户体验。在网页开发中,当面对包含大量选项的下拉菜单时,用户往往需要...

    jquery常用的标签

    - 示例:`$("#testSelect option:selected").text()`:获取下拉列表中被选中的选项文本。 ### 总结 通过上述介绍,我们可以看到jQuery提供了非常强大且灵活的选择器和DOM操作功能,使得开发者能够更轻松地实现复杂...

    jquery获取select,option所有的value和text的实例

    3. 获取select元素中option的value和text值 通过jQuery的`.each()`方法可以遍历选中的option元素集合。`.each()`方法为每个匹配的元素执行一个函数。在遍历过程中,通过`$(this).text()`获取当前遍历到的option元素...

    jquery中获取select选中值的代码

    1. **获取select选中的文本**: 使用`$(“#ddlregtype”).find(“option:selected”).text();` 这段代码,我们可以获取到用户当前选中的`&lt;option&gt;`元素的文本内容。这里的`#ddlregtype`是`&lt;select&gt;`元素的ID,`find...

    jQuery对Select的操作大集合(收藏)

    `$("#select_id").find("option:selected").text()` 可以获取当前选中Option的文本内容,`$("#select_id").val()` 返回选中Option的value值。此外,`$("#select_id").get(0).selectedIndex` 提供了选中Option的索引...

    jQuery 改变P标签文本值方法

    通过本篇内容,我们了解了使用jQuery来改变P标签文本值的具体方法。掌握这些操作可以让我们在Web页面开发中,轻松地实现内容的动态变化,从而丰富用户的交互体验。希望这些知识点能够对你在前端开发过程中有所启发和...

    jquery 获得select、radio、checkbox选择的text和value值

    ### jQuery 获取 Select、Radio、Checkbox 的 Text 和 Value 值详解 #### 一、Select 下拉框的操作 在网页开发中,`&lt;select&gt;` 标签用于创建下拉列表,通常用于用户输入时的选择操作。jQuery 提供了简单且强大的...

    jquery点击文本框提示标签自动补全_关键字标签value值提取

    2. DOM操作:jQuery提供了`$(selector).html()`、`$(selector).text()`、`$(selector).val()`等方法,分别用于获取或设置元素的HTML内容、纯文本内容和表单元素的值。 3. 事件处理:jQuery的`click()`, `focus()`, ...

Global site tag (gtag.js) - Google Analytics