`

利用jquery操作select下拉列表框(简洁版)

阅读更多
近日在使用jquery操作select下拉列表框时遇到了一些需要注意的地方,功能是通过点击事件动态复制一个select到table的td中,并利用td包含的文本内容找到对应的select选中项,代码如下:

HTML:
<!--下拉框-->
<select id="stsoft" name="stsoft">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>


<table id="datatable" border="0" cellpadding="0" cellspacing="0">
      <thead>
<tr align="left">
      <th>
行号</th>
<th>
软件类型</th>
<th>
操作</th>
</tr>
</thead>
<tr id="template">
<td class="RowId">
</td>
<td class="SoftType">
</td>
<td class="update">
</td>
</tr>
</table>

js:

$(".update").click(function(){
var soft = $(".SoftType").text();
$(".SoftType").html($("#stsoft").clone());
      for(var i=0; i<$(".SoftType select option").length; i++){
      if($(".SoftType select")[0].options(i).text== soft){
$(".SoftType select")[0].selectedIndex = i;
}
}

      var  rowId = $(".RowId").text();

var content='\
<a href="javascript:void(0);" onclick="Update('+ rowId +');">更新</a>&nbsp;&nbsp;\
<a href="javascript:void(0);" onclick="Cencel('+ rowId +');">取消</a>\
';
$(".update").html(content);
});



其他有关select的取值或赋值方式:
获取select被选中项的文本
var item = $("select[@name= stsoft] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#stsoft')[0].selectedIndex = 1;
获取value值
$('#stsoft').val();
设置value=1的项目为当前选中项
$("#stsoft").attr("value",“1”);
$('#stsoft').val(“1”);

--------------------------------------------------------------------


//获取第一个option的值
$('#test option:first').val();
//最后一个option的值
$('#test option:last').val();
//获取第二个option的值
$('#test option:eq(1)').val();
//获取选中的值
$('#test').val();
$('#test option:selected').val();
//设置值为2的option为选中状态
$('#test').attr('value','2');
//设置第一个option为选中
$('#test option:last').attr('selected','selected');
$("#test").attr('value' , $('#test option:last').val());
$("#test").attr('value' , $('#test option').eq($('#test option').length - 1).val());
//获取select的长度
$('#test option').length;
//添加一个option
$("#test").append("<option value='9'>ff</option>");
$("<option value='9'>ff</option>").appendTo("#test");
//添除选中项
$('#test option:selected').remove();
//指定项选中
$('#test option:first').remove();
//指定值被删除
$('#test option').each(function(){
if( $(this).val() == '5'){
$(this).remove();
}
});
$('#test option[value=5]').remove();

//获取第一个Group的标签
$('#test optgroup:eq(0)').attr('label');
//获取第二group下面第一个option的值
$('#test optgroup:eq(1)ption:eq(0)').val();

获取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自动滚动下拉列表框.rar

    本篇文章将深入探讨如何利用jQuery实现自动滚动下拉列表框这一常见的JS特效,特别是针对“选项卡TAB”的交互优化。 一、jQuery基础 jQuery是一个JavaScript库,它简化了JavaScript的DOM操作、事件处理以及动画效果...

    jQuery Select 下拉单选框模拟插件 V1.3.6

    **jQuery Select 下拉单选框模拟插件 V...总之,jQuery Select下拉单选框模拟插件为网页开发者提供了一种增强下拉菜单体验的解决方案。通过其丰富的定制选项和易用的API,可以方便地集成到各种项目中,提升用户体验。

    jquery ui 树状下拉选择框

    Comboxtree 是一个结合了下拉框和树形结构的组件,允许用户在下拉列表中看到数据的层级结构,并进行选择。 ##### 4.2 使用方法 1. **引入必要文件**: - 引入 jQuery 和 jQuery EasyUI 的 CSS 及 JS 文件。 - ...

    三级联动下拉列表框(SELECT)jquery插件(js 三级联动) php版

    总的来说,这个项目利用了jQuery的事件处理和DOM操作能力,结合PHP服务器端处理,通过AJAX实现了一个三级联动的下拉列表框。在实际应用中,这样的功能对于减少页面刷新,提升用户体验有着显著作用。开发人员可以通过...

    jquery+css3实现的图片式自定义下拉列表框效果.zip

    本项目“jquery+css3实现的图片式自定义下拉列表框效果”正是利用了这两者的强大功能,旨在提供一种创新的、具有图像元素的下拉列表框设计,以提升用户体验。 jQuery是一个轻量级的JavaScript库,它简化了DOM操作、...

    jquery下拉列表

    通过引入jQuery库,我们可以使用简洁的语法来执行常见的DOM操作。 1. 引入jQuery库: 在HTML文件中,通过`&lt;script&gt;`标签引入jQuery库,通常从CDN(内容分发网络)获取最新版本。例如: ```html ...

    jQuery为动态生成的select元素添加事件的方法

    2. 动态生成元素的事件处理难题:在Web开发中,经常遇到需要动态生成页面元素的情况,比如根据用户操作生成新的输入框、按钮或下拉选择框(select)。一旦这些元素被添加到DOM中,为了能够响应用户的交互,我们需要...

    25 个免费的 HTML5 CSS3 jQuery 下拉菜单

    对于下拉菜单,HTML5中的&lt;select&gt;元素通常用来创建传统的选择列表,但通过添加自定义数据属性和JavaScript,我们可以创建更复杂的交互式下拉菜单。 CSS3是层叠样式表的第三版,带来了许多新特性,如选择器扩展、...

    JQuery写的日期级联下拉菜单

    这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件,允许用户通过三个连续的下拉列表分别选择年、月和日。这种设计使得用户能够快速、准确地输入日期,同时保持页面的简洁性...

    jQuery.Select

    《jQuery.Select:优化与增强选择器功能》 jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理和动画制作。在jQuery的世界里,“jQuery.Select”是一个专门针对HTML选择器(`...

    jquery.multiSelect下拉多选

    首先,jQuery.multiSelect是由开发者精心设计的,用于创建具有多选功能的下拉列表。这个插件的特点在于其易于使用、高度可定制和丰富的视觉效果。在提供的压缩包中,我们可以看到以下几个关键文件: 1. `jquery....

    基于easyui 1.4.5的单选和多选框组件

    本文将深入探讨基于jQuery EasyUI 1.4.5的单选框和多选框组件的使用方法、功能特性以及如何结合实际项目进行应用。 一、jQuery EasyUI 1.4.5简介 EasyUI是一套基于jQuery的UI框架,它包含了多个可复用的UI组件,如...

    jQuery Combobox 扩展 (select+autocomplete)20110730更新

    jQuery Combobox 就是为了解决这个问题,它将下拉列表的简洁性与输入框的可搜索性相结合,让用户可以更快地找到并选择他们想要的选项。 这个插件的工作原理是,将 `&lt;select&gt;` 元素转换为一个带有输入框的元素,...

    Jquery API (字母排序与列表框两种均有)

    在HTML中,列表框通常指的是`&lt;select&gt;`元素,用于创建下拉选项列表。jQuery提供了丰富的API来操作这些元素,包括选择、添加、删除和修改选项。 1. **选择选项**:使用`val()`方法可以设置或获取选中的值。例如: ...

    jQuery模拟select下拉框多选和单选插件.zip

    本资源“jQuery模拟select下拉框多选和单选插件.zip”提供了一种利用jQuery实现模拟下拉框选择功能的方法,特别适合在网页中创建具有多选和单选功能的下拉菜单,而无需使用原生的`&lt;select&gt;`元素。这样的插件对于提升...

    selectpage.js,版本2.19

    SelectPage.js下拉分页选择插件界面简洁,支持下拉,分页,键盘操作等功能。它的特点还有:插件基于jQuery开发,可在Bootstrap2、3环境下使用,亦可在原生无UI框架的环境下直接使用。 兼容Bootstrap2、3样式,以及非...

    jquery select美化 select插件下拉框美化成类似菜单风格(兼容很好).zip

    此外,下拉菜单通常会展示为一个可展开/折叠的列表,与原生select的下拉箭头效果类似。 3. **事件绑定**:插件会监听用户的鼠标和键盘事件,当用户点击或按键盘上的方向键时,菜单项会高亮显示。选中某一项后,插件...

    基于jquery实现的select美化自定义下拉框样式.zip

    本资源"基于jquery实现的select美化自定义下拉框样式.zip"提供了一种利用jQuery库来改进select元素外观的方法。jQuery是JavaScript的一个强大库,它简化了DOM操作、事件处理和动画设计,使得前端开发更为高效。 1. ...

    级联下拉列表绑定 地区JS文件

    在这个级联下拉列表的实现中,jQuery简化了DOM操作,使得我们可以更简洁地获取和修改元素状态。 `AreaData_min.js`是地区数据的压缩文件,其中包含了各级别的地区信息,如国家、省份和城市的ID和名称。这些数据通常...

    ajax动态加载列表框

    Ajax动态加载列表框,简单来说,就是利用Ajax技术来实现在用户交互时动态更新下拉选择框(Select Box)中的选项,而无需整个页面刷新。这种联动效果常见于多级联动选择、根据前一选择过滤后一选择等场景,极大地提高...

Global site tag (gtag.js) - Google Analytics