一、 获取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的选择器功能是如此地强大呀!
三、 添加删除option项
为select追加一个Option(下拉项)
$("#slc2").append("<option value='"+i+"'>"+i+"</option>");
为select插入一个option(第一个位置)
$("#slc2").prepend("<option value='0'>请选择</option>");
PS: prepend 这是向所有匹配元素内部的开始处插入内容的最佳方式。
删除select中索引值最大option(最后一个)
$("#slc2 option:last").remove();
删除select中索引值为0的option(第一个)
$("#slc2 option[index='0']").remove();
删除select中value=’3’的option
$("#slc2 option[value='3']").remove();
删除select中text=’4’的option
$("#slc2 option[text='3']").remove();
分享到:
相关推荐
总结起来,jQuery黑白两种响应式手机下拉框select的实现涉及到响应式设计原则、自定义CSS样式以及利用jQuery进行事件处理和DOM操作。这个过程不仅提升了用户体验,也展示了jQuery在增强网页交互性方面的强大能力。
本资源"jQuery Select下拉框美化代码"提供了一种方法来改进传统下拉框的外观,使其更具吸引力。以下是这个美化代码的核心知识点: 1. **jQuery库**:jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...
【jQuery实现的角色左右选择特效】是一种交互式的用户界面设计,常用于权限管理或者角色分配的场景,让用户能够方便地在两个列表之间转移选项。在这个特效中,有两个`<select>`元素,一个代表左侧可供选择的角色,另...
jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。在本案例中,我们将探讨如何使用jQuery插件Datatables来改进表格,并结合JavaScript的选择框技术提升用户体验。 Datatables是一...
《jQuery带搜索筛选功能的下拉框美化插件详解》 在网页开发中,下拉框(Dropdown)是常见的交互元素,它能有效地节省空间,提供多种选择。然而,随着选项数量的增加,用户查找所需项变得困难。为了解决这个问题,...
标题 "修改一个jQuery实现的带时间的日历" 涉及到的是在Web开发中使用JavaScript库jQuery创建一个具有时间功能的日历插件。这个日历不仅显示日期,还允许用户选择具体的时间,增强了用户体验。下面我们将深入探讨...
同时,通过绑定事件处理函数,如 `$(element).on('select', function() {...})`,可以响应用户交互。 **3. jQuery UI 主题** jQuery UI 的一个重要特点是其强大的主题系统,通过 ThemeRoller 工具,开发者可以...
jQuery 占位符支持 HTML5 占位符属性的简单 jQuery 插件。怎么做: 首先下载jquery.placeholder.js和jquery.js然后将这些... // Select all inputs and textarea 如果浏览器支持 HTML5 占位符属性,则插件不执行任何操
$('#selectAll').on('click', function() { if ($(this).is(':checked')) { $('input[type="checkbox"]').prop('checked', true); } else { $('input[type="checkbox"]').prop('checked', false); } }); ``` ...
本文将深入探讨jQuery如何实现表单美化,以及如何对input输入框、select下拉框、复选框和单选框进行样式定制。 一、jQuery表单美化基础 jQuery通过选择器和方法可以方便地操控DOM元素,实现对表单元素的动态操作。...
对于`disabled`属性,当需要禁用一个表单元素(如input或select元素)时,同样推荐使用`.prop()`方法。`.prop()`方法不仅能设置`disabled`属性,还能返回一个布尔值,表明元素是否被禁用。这种方法比`.attr()`更适合...
此外,如果你需要处理的不仅仅是`input`元素,也可以调整选择器来适应其他类型的元素,例如`select`或`textarea`。 总的来说,理解jQuery的选择器和属性访问是提高Web开发效率的关键技能。通过熟悉这些基本操作,你...
2. 自定义样式:传统的HTML下拉框(`<select>`元素)样式受限,难以进行美化。利用jQuery,我们可以创建自定义的HTML结构,如使用`<ul>`和`<li>`来模拟下拉框,并应用CSS进行美化,提供更丰富的视觉效果。 二、...
3. **jQuery插件**:`jquery.multi-select.js`是jQuery的一个插件,扩展了原生<select>元素的功能,使其具备多选特性。 4. **Shim**:在不支持新特性的浏览器中,Shim用于模拟新特性,确保代码兼容性。 5. **HTTPS...
下拉框选择特效的核心在于将传统的HTML `<select>` 元素升级为一个具有高级功能的组件。这个组件通常由两个主要部分组成:一个可点击的触发按钮和一个展开的选项列表。当用户点击触发按钮时,选项列表会以酷炫的动画...
jQuery表单域选择器是jQuery库中用于选取HTML表单元素的强大工具,它们简化了对输入字段、文本区域、选择列表、按钮等的处理。下面将详细介绍这些选择器的用法和功能。 1. `:input`选择器:这个选择器用于选取所有...
3. **`val()`**: 对于表单元素,如`<input>`、`<textarea>`或`<select>`,`val()`方法用于获取或设置它们的值。 ```javascript var inputValue = $('input[type="text"]').val(); ``` ### 获取属性 1. **`attr...
它的工作原理类似于jQuery的`$(selector)`,通过传入一个CSS选择器,`Ext.select()`能够返回匹配该选择器的所有元素的数组。这些元素可以是EXTJS组件,也可以是普通的HTML元素。在EXTJS中,你可以利用这个方法来操控...
- 在JavaScript中,选择控件通常指的是下拉列表(`<select>` 元素)。通过JavaScript,我们可以动态添加、删除选项,改变选中状态,甚至实现多选功能。`jQuery UI` 提供了可自定义的下拉选择器,如`Autocomplete`,...