`

jquery select 下拉框选择代码

阅读更多
<select name=’sel’ id=’sel’>
<option value=’1′>1</option>
<option value=’2′ selected=’selected’>我被选中了</option>
<option value=’3′>2</option>
</select>
<script>
alert($("select[@name='sel'] option[@selected]").text());
$("#sel").val(’2′);
alert($("select[@name='sel'] option[@selected]").text());
</script>


查询被选中的option中的内容当然也可以用 alert($("#sel option[@selected]").text());

稍微解释一下:
select[@name='sel'] option[@selected] 表示具有name 属性,并且该属性值为’sel’ 的select元素 里面的具有selected 属性的option 元素;可以看出有@开头的就表示后面跟的是属性。

得到select项的个数
jQuery.fn.size = function()
{
return jQuery(this).get(0).options.length;
}
//获得选中项的索引
jQuery.fn.getSelectedIndex = function()
{
return jQuery(this).get(0).selectedIndex;
}
//获得当前选中项的文本
jQuery.fn.getSelectedText = function()
{
if(this.size() == 0)
{
return "下拉框中无选项";
}
else
{
var index = this.getSelectedIndex();
return jQuery(this).get(0).options[index].text;
}
}
//获得当前选中项的值
jQuery.fn.getSelectedValue = function()
{
if(this.size() == 0)
{
return "下拉框中无选中值";
}
else
{
return jQuery(this).val();
}
}
//设置select中值为value的项为选中
jQuery.fn.setSelectedValue = function(value)
{
jQuery(this).get(0).value = value;
}
//设置select中文本为text的第一项被选中
jQuery.fn.setSelectedText = function(text)
{
var isExist = false;
var count = this.size();
for(var i=0;i<count;i++)
{
if(jQuery(this).get(0).options[i].text == text)
{
jQuery(this).get(0).options[i].selected = true;
isExist = true;
break;
}
}
if(!isExist)
{
alert("下拉框中不存在该项");
}
}
//设置选中指定索引项
jQuery.fn.setSelectedIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("选中项索引超出范围");
}
else
{
jQuery(this).get(0).selectedIndex = index;
}
}
//判断select项中是否存在值为value的项
jQuery.fn.isExistItem = function(value)
{
var isExist = false;
var count = this.size();
for(var i=0;i<count;i++)
{
if(jQuery(this).get(0).options[i].value == value)
{
isExist = true;
break;
}
}
return isExist;
}
//向select中添加一项,显示内容为text,值为value,如果该项值已存在,则提示
jQuery.fn.addOption = function(text,value)
{
if(this.isExistItem(value))
{
alert("待添加项的值已存在");
}
else
{
jQuery(this).get(0).options.add(new Option(text,value));
}
}
//删除select中值为value的项,如果该项不存在,则提示
jQuery.fn.removeItem = function(value)
{
if(this.isExistItem(value))
{
var count = this.size();
for(var i=0;i<count;i++)
{
if(jQuery(this).get(0).options[i].value == value)
{
jQuery(this).get(0).remove(i);
break;
}
}
}
else
{
alert("待删除的项不存在!");
}
}
//删除select中指定索引的项
jQuery.fn.removeIndex = function(index)
{
var count = this.size();
if(index >= count || index < 0)
{
alert("待删除项索引超出范围");
}
else
{
jQuery(this).get(0).remove(index);
}
}
//删除select中选定的项
jQuery.fn.removeSelected = function()
{
var index = this.getSelectedIndex();
this.removeIndex(index);
}
//清除select中的所有项
jQuery.fn.clearAll = function()
{
jQuery(this).get(0).options.length = 0; }
分享到:
评论

相关推荐

    jQuery select下拉框美化代码.zip

    `jQuery select下拉框美化代码`这个压缩包的实现可能还包含了其他细节,如防止多次点击导致的闪烁,以及在鼠标移出下拉框时自动隐藏内容等功能。这种美化代码对于提升网站的用户体验和专业感具有积极意义,特别是...

    80、jquery select下拉框美化代码

    本知识点聚焦于"80、jquery select下拉框美化代码",主要讨论如何使用jQuery来美化HTML中的select元素,以提升用户界面的视觉效果和用户体验。 传统的HTML select元素在不同浏览器中的样式表现不一,且通常缺乏...

    jQuery Select下拉框美化代码.zip

    综上所述,"jQuery Select下拉框美化代码.zip"提供的示例是一个典型的jQuery Select美化实践,通过HTML、CSS和JavaScript的协同工作,实现了美观且易用的下拉选择框。对于开发者来说,理解并掌握这一技术,不仅可以...

    jQuery Select下拉框美化代码

    **jQuery Select下拉框美化代码**是用于提升网站交互体验的一种技术手段,它通过使用JavaScript库jQuery和特定的插件,如本例中的`ui-select.js`,来增强和美化HTML中的`&lt;select&gt;`元素。在传统的网页设计中,`...

    jquery select下拉框美化代码.zip

    "jquery select下拉框美化代码.zip" 提供了一种解决方案,通过结合jQuery库来增强和美化下拉框的外观和交互效果,使其更加吸引用户。 这个代码包可能包含以下几个部分: 1. **jQuery库**:jQuery是一个广泛使用的...

    jQuery手机下拉框select

    3. **多选模式**:对于支持多选的`&lt;select multiple&gt;`元素,jQuery Mobile会显示一个多选的列表,用户可以通过勾选来选择多个选项。 4. **弹出/下拉行为**:默认情况下,Select Menu会在点击后以弹出窗口的形式展示...

    jQuery下拉框国家选择代码

    本项目“jQuery下拉框国家选择代码”是为网页开发者提供的一款实用工具,它允许用户在下拉菜单中选择全世界的国家,并且具备搜索功能和国旗图标显示,提升了用户体验。 首先,我们要了解jQuery如何实现下拉框的动态...

    jQuery Select下拉框美化插件 菜单淡如淡出动画

    但是今天我们要为大家分享一款基于jQuery的Select下拉框美化插件,它完全重写了浏览器默认的Select下拉框样式,而且在下拉菜单展开时还伴随淡如淡出的动画效果,非常不错。当然我们以前也分享过一些类似的插件,可以...

    jQuery城市下拉框菜单选择代码

    在网页设计中,用户界面的交互性和易用性至关重要,jQuery城市下拉框菜单选择代码就是为提升用户体验而设计的一种常见技术。这个标题所指的知识点主要涉及如何使用jQuery库来实现一个动态的城市选择下拉菜单,使得...

    jQuery Select下拉框分类菜单多选插件

    在本文中,我们将深入探讨"jQuery Select下拉框分类菜单多选插件"这一主题,它是一款用于增强标准HTML选择器功能的实用工具。这款插件不仅提供了分门别类的下拉菜单,还集成了搜索功能,使得用户在处理大量选项时...

    jQuery Select下拉框美化特效.zip

    "jQuery Select下拉框美化特效"就是为了提升用户体验,将原本朴素的Select元素转化为具有视觉吸引力的组件。 该特效主要基于JavaScript库jQuery实现,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件...

    jQuery Select下拉框关键字匹配查询选择代码.zip

    《jQuery Select下拉框关键字匹配查询选择代码》 在网页开发中,用户界面的交互性是提升用户体验的关键因素之一。jQuery作为一个强大的JavaScript库,为开发者提供了丰富的API和工具,使得实现复杂的交互效果变得...

    jQuery Select下拉框关键字匹配查询选择代码

    "jQuery Select下拉框关键字匹配查询选择代码"是关于利用jQuery实现一种功能,即在下拉选择框中通过输入关键字实时筛选出匹配的选项。这种功能常见于许多Web应用中,可以极大地提高用户体验,让用户能够快速找到目标...

    jQuery select下拉框单选和多选插件

    **jQuery select下拉框单选和多选插件** 在Web开发中,下拉框(select)是常用的一种用户交互元素,它用于提供多个选项供用户选择。然而,原生的HTML select元素在样式和交互性上往往显得较为单一。为了解决这个...

    jQuery Select下拉框菜单选择插件.zip

    《jQuery Select下拉框菜单选择插件》 在网页开发中,下拉框(Select)是一种常见的表单元素,用于用户在预设的选项中进行选择。然而,原生的HTML下拉框样式单一,功能有限,无法满足复杂的交互需求。这时,jQuery...

    jQuery select下拉框样式美化插件.zip

    《jQuery Select下拉框样式美化插件详解及应用》 在网页设计中,下拉框(Select)作为常见的数据选择控件,其样式往往显得较为单一,无法满足设计师们追求美观与个性化的需求。jQuery,这个强大的JavaScript库,为...

    jQuery Select下拉框美化表单.zip

    "jQuery Select下拉框美化表单"项目通过结合jQuery和特定的美化插件,为网页设计师和开发者提供了一种高效、灵活的方案,以提升下拉框在网页表单中的视觉效果和交互体验,特别适合于招聘网站等需要精细控制选择项的...

Global site tag (gtag.js) - Google Analytics