`

利用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操作select下拉列表框的代码

    通过使用jQuery这个强大的JavaScript库,我们可以更加便捷地操作select下拉列表框。在本文中,我们将通过实例来探讨如何使用jQuery来操作select元素,包括获取和设置选中的值、动态添加和清空选项等。 首先,我们要...

    Jquery实现select下拉列表根据radio选项级联

    本主题将探讨如何利用jQuery实现一个特定的功能——“select下拉列表根据radio选项级联”。这个功能常用于创建动态表单,其中,用户选择一个radio按钮后,相关的select下拉列表会自动更新其选项,以提供与所选radio...

    jquery自动滚动下拉列表框.rar

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

    div模拟select自定义下拉列表框(jQuery)

    `div模拟select自定义下拉列表框`是一种常见做法,它利用JavaScript(如jQuery)和CSS来实现,可以提供比原生`&lt;select&gt;`元素更丰富的样式控制和交互体验。本篇将详细介绍这种技术及其应用。 一、为什么使用div模拟...

    jQuery ajax JSON 下拉列表框级联

    本示例中的"jQuery ajax JSON 下拉列表框级联"就是这样的一个应用。 1. **jQuery**:jQuery是一个高效、简洁且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在本案例中,jQuery用于...

    jquery自动滚动下拉列表框.zip

    总结来说,"jquery自动滚动下拉列表框.zip"这个项目展示了如何利用jQuery的动画功能和事件处理来增强HTML的下拉列表框,创建出具有自动滚动效果的交互式界面。这不仅提升了用户体验,也展示了前端开发者对jQuery库的...

    使用JQuery左右移动下拉列表框中的值

    标题“使用JQuery左右移动下拉列表框中的值”涉及的是在网页开发中利用JavaScript库JQuery来操作HTML的下拉列表(select元素),特别是实现选中项在两个并排的下拉列表之间动态移动的功能。这样的功能常见于用户需要...

    jquery搜索栏select下拉选择框

    本主题聚焦于“jquery搜索栏select下拉选择框”,这是一个常见的交互元素,用于提供用户友好的搜索体验。在网页的搜索功能中,用户通常需要指定搜索范围,如按类别、日期或其他特定条件进行筛选。这种情况下,一个...

    jQuery模拟Select下拉菜单选中添加代码.zip

    在这个项目中,我们主要利用jQuery的事件处理、DOM操作以及动画效果等功能,来构建一个可定制的下拉菜单。通过模拟Select,我们可以自由控制下拉列表的显示、隐藏,甚至可以实现动态加载和异步更新。 首先,`index....

    select下拉列表显示图片内容

    在网页设计中,`&lt;select&gt;`元素通常用于创建下拉列表,它允许用户从一组预定义的选项中进行选择。然而,传统的`&lt;select&gt;`标签并不支持直接在选项中显示图片,只支持纯文本内容。但随着现代Web技术的发展,我们可以...

    jQuery 仿 Select 下拉

    "jQuery 仿 Select 下拉"就是一个常见的实践,它利用jQuery库和HTML、CSS来模拟原生的Select元素,同时增加更多的交互性和自定义样式。下面将详细介绍这个主题的相关知识点。 首先,jQuery是一个强大的JavaScript库...

    一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择

    在本篇教程中,我们将深入探讨如何利用jQuery库来实现一个功能丰富的下拉列表左右选择交互。jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画效果,使得前端开发变得更加高效和便捷。本章节...

    jQuery树形插件下拉列表选择框.zip

    本文将详细探讨jQuery树形插件在下拉列表选择框中的应用,以及如何利用它来提升用户的操作体验。 首先,"jQuery树形插件下拉列表选择框"是一种创新的UI设计,它将传统的下拉列表与树形结构相结合,使用户可以在层级...

    jQuery树形下拉列表选择框代码.zip

    《jQuery树形下拉列表选择框代码解析与应用》 在网页开发中,为了提高用户体验,我们经常需要设计出交互性更强的元素,比如树形下拉列表选择框。jQuery作为一个强大的JavaScript库,提供了丰富的API和插件,使得...

    jquery如何自定义select下拉样式

    在网页开发中,jQuery是一个...通过以上步骤,我们可以利用jQuery和Select2插件轻松实现自定义的`&lt;select&gt;`下拉样式,提升网页的视觉效果和交互体验。在实际项目中,根据需求选择合适的插件和配置,以达到最佳效果。

    jQuery分类下拉搜索框代码.zip

    本文将详细解析如何利用jQuery技术构建一个分类下拉搜索框,以帮助用户快速找到所需的商品或信息。这个功能是基于jQuery 3.3.1版本的轻量级JavaScript库实现的。 首先,jQuery库为开发者提供了丰富的DOM操作、事件...

    jquery select列表选择框选中美化效果源码

    本主题聚焦于“jquery select列表选择框选中美化效果源码”,这是一个关于利用jQuery来增强HTML `&lt;select&gt;` 元素外观和交互性的技术实践。 在标准HTML中,`&lt;select&gt;`元素用于创建下拉列表,但其样式和交互性往往...

    jquery下拉列表插件

    而“jQuery下拉列表插件”就是利用jQuery来增强HTML原生的`&lt;select&gt;`元素,提供更丰富的交互性和自定义样式。这个插件名为“selectBox”,它旨在模仿并扩展下拉列表的功能,为用户带来更好的使用体验。 首先,原生...

Global site tag (gtag.js) - Google Analytics