`
txf2004
  • 浏览: 7041916 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery操作select下拉列表框

阅读更多
<!-- google_ad_client = "pub-4490194096475053"; /* 内容页,300x250,第一屏 */ google_ad_slot = "3685991503"; google_ad_width = 300; google_ad_height = 250; // -->

JQuery操作select标签的方法,一般如下使用:
$("#select1")[0].options(index).selected = true; //使第index个option选中
$("#select1")[0].options(3).text //取索引为3的option值

获取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”);


$(".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到table的td中,并利用td包含的文本内容找到对应的select选中项,代码如下:
<!--下拉框-->
<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>

分享到:
评论

相关推荐

    利用jquery操作select下拉列表框的代码

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

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

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

    jquery实现select带模糊搜索下拉选择框

    `&lt;select&gt;` 标签用于创建一个下拉列表,用户可以从中选择一个或多个选项。然而,原生的 `select` 元素并不支持模糊搜索功能,所以我们需要借助 `jQuery` 和 CSS 来增强其功能。 1. **引入资源**: 在项目中,你...

    jquery+css3美化select下拉列表框特效

    在网页设计中,"jquery+css3美化select下拉列表框特效"是一个常见的需求,它旨在提升用户体验,使传统的HTML `&lt;select&gt;` 元素看起来更加现代和吸引人。本项目结合了JavaScript库jQuery和CSS3的新特性,为下拉列表框...

    jquery 模拟Select下拉选择框取值功能.zip

    在模拟Select下拉选择框时,我们通常会用到以下jQuery方法: 1. `addClass()` 和 `removeClass()`:用来添加或移除CSS类,从而改变元素的样式,实现下拉效果。 2. `toggle()`:用于切换元素的可见性,模拟点击显示/...

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

    《jQuery实现自动滚动下拉列表框技术详解》 在网页设计与开发中,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。本篇文章将深入探讨如何利用jQuery实现自动滚动下拉列表框这一常见的JS特效,特别是针对...

    jQuery和css3超赞select下拉列表框美化插件

    **jQuery和CSS3超赞Select下拉列表框美化插件详解** 在网页设计中,Select元素通常是用来创建下拉选择菜单的,但其默认样式在许多浏览器中并不统一,有时显得较为简陋。为了提升用户体验和界面美观度,开发者经常...

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

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

    jQuery轻量级模块化select下拉列表框插件

    select3是一款基于jQuery或Zepto.js的轻量级模块化select下拉列表框插件。select3下拉列表框可以进行单选、以tag的形式进行多选、可以指定输入类型格式、可以进行分组选择、还可以ajax进行远程调用。

    jQuery ajax JSON 下拉列表框级联

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

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

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

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

    在“jquery自动滚动下拉列表框.zip”这个项目中,我们聚焦于一个特定的用户界面元素——下拉列表框,并探讨如何使用jQuery实现自动滚动的效果。这个功能通常用于创建动态、交互性更强的网页应用。 首先,我们需要...

    jQuery操作下拉列表框

    对于jQuery操作下拉列表框(也称为dropdownlist或select元素),本文将详细讲解如何使用jQuery来实现各种功能。 首先,我们来看一个具体的例子,这个例子展示了如何根据条件动态地添加和移除下拉列表框的选项: ``...

    jquery搜索框下拉列表选择搜索分类效果.rar

    3. **事件监听**:jQuery的事件监听器(如`.on('change')`或`.on('input')`)用于捕获用户在搜索框中的输入或下拉列表中的选择变化,触发相应的搜索操作。 4. **Ajax通信**:当用户选择分类或输入关键词时,jQuery...

    jquery搜索栏select下拉选择框

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

    手动样式仿select下拉列表框

    "手动样式仿select下拉列表框"就是一个这样的实践,它通过CSS和JavaScript等技术,使得原本样式单一的SELECT元素变得更为美观、交互性强。 在传统的HTML中,SELECT元素用于创建下拉列表,但其默认样式受到浏览器的...

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

    《jQuery模拟Select下拉菜单选中添加代码》 在网页开发中,Select下拉菜单是一种常见的用户交互元素,用于提供多个选项供用户选择。然而,原生的HTML Select标签有时不能满足设计师和开发者对于界面美观性和交互性...

    select下拉列表显示图片内容

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

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

    在本文中,我们将深入探讨如何使用jQuery来模拟一个具有选中效果和搜索功能的Select下拉菜单,这在多选场景中非常有用。 首先,我们需要理解原生HTML的`&lt;select&gt;`元素及其`&lt;option&gt;`子元素。`&lt;select&gt;`用于创建一个...

Global site tag (gtag.js) - Google Analytics