`
zousy999
  • 浏览: 19139 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS & JQuery 动态添加 option

 
阅读更多
js
var selid = document.getElementById("sltid");

       for(var i=0; i<10;i++){     //循环添加多个值

              sid.options[i] = new Option(i,i);

       }

 

jQuery
$("#selectId").append("<option value='"+value+"'>"+text+"</option>");

当然除了这句,还有设置默认选择值、第一个的值、最后一个的值、第N个的值等等的,所以在网上搜了一上:

jQuery获取Select选择的Text和Value: 

1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 

2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text

3. var checkValue=$("#select_id").val();  //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 

  

jQuery添加/删除Select的Option项: 

1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项) 

2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)

4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)

5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option

5. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option 

设置select: 
设置select 选中的索引: 
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值 
设置select 选中的value: 
$("#ddlRegType ").attr("value","Normal“); 
$("#ddlRegType ").val("Normal"); 
$("#ddlRegType ").get(0).value = value; 
设置select 选中的text: 
var count=$("#ddlRegType option").length; 
for(var i=0;i<count;i++) 
{ if($("#ddlRegType ").get(0).options[i].text == text) 
{ 
$("#ddlRegType ").get(0).options[i].selected = true; 
break; 
} 
} 
清空 Select: 
$("#ddlRegType ").empty(); 

 

分享到:
评论

相关推荐

    JS & JQuery 动态添加 select option

    里动态添加option问题,一开始以为是JS那里动态添加,所以用了JS动态添加option的方法,但你那里是用JQuery的,所以才会一直出错,下面记下在JS和JQuery里添加option的区别。 JS: var selid = document....

    jquery动态添加option示例

    js动态添加option 代码如下:var sel= document.getElementById(“Selected1”); sel.options.add(new Option(“请选择”,””));sel.options.add(new Option(“name”,”id”)); jquery动态添加option 代码...

    关于jquery中动态增加select,事件无效的快速解决方法

    近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用。 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器。而live事件:为当前或未来的匹配元素添加一个或多个事件处理器。 ...

    浅谈jQuery添加的HTML,JS失效的问题

    如下图所示, 点击添加后,会新添加一行,但是二级联动就失效了, $('.provinceList').live('change', function(){ var provinceId = $(this).val(); var obj = $(this); $.post('/yuyue/ajaxCityList', ...option v

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    两个select之间option的互相添加操作(jquery实现)

    自己写了一个很简单的jquery插件,在页面中调用其中的函数就可实现. 插件源代码(listtolist.js): 代码如下:/** fromid:源list的id. toid:目标list的id. moveOrAppend参数(“move”或者是”append”): move — 源list...

    jquery电子文档chm

    Note: If you specify the dataType option described below, make sure the server sends the correct MIME type in the response (eg. xml as "text/xml"). Sending the wrong MIME type can lead to unexpected ...

    tree-multiselect.js:jQuery多重选择和嵌套选项

    jQuery树多选 该插件使您可以将甜美的Treeview前端添加到&lt;select&gt;节点。 可以像以前一样使用基础&lt;select&gt;节点。 这意味着您仍然可以使用$("select").val()或selectElement.value来获取值,就像没有插件...

    基于jquery实现select选择框内容左右移动添加删除代码分享

    select选择框内容左右移动添加删除代码基于jquery-1.8.3.min.js实现,简单实用,选中选项内容,点击移动按钮可进行内容左右移动,双击option内容也可左右移动,支持单选移动、多选移动和一键全部移动! 运行效果图:...

    Jquery实现select multiple左右添加和删除功能的简单实例

    项目要实现这样的一个功能(如下图所示):选择...相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的。 具体代码如下: 选择 &lt;select id=fb_list name=fb_list multiple=multiple size=8

    fancyMultipleSelect:花式多选,作为普通多选的替代品

    花式多选花式多选将多选变成了一种易于样式化的选择。 花式多选具有搜索和添加新选项的能力。相依性 &lt; script src =" jquery.min.js ... &lt; option&gt; Option 1 &lt;/ option&gt; &lt; option&gt; Option 2 &lt;/ option&gt; &lt; option&gt; O

    jQuery Mobile动态刷新页面样式的实现方法

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素。添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样式了,而变成了很丑陋的元素样式。如下图所示...

    jQuery Ajax实现Select多级关联动态绑定数据的实例代码

    jQuery选择插件分为基本版和美化版,重点说下美化版,如下图所示: 相比最原始的版本,美化后的选择插件可以说是...注意引用jQuery的js,有多种版本,建议使用高版本,如 jquery-1.9.1.min.js。 下面进入到主题,sele

    JS,Jquery获取select,dropdownlist,checkbox下拉列表框的值(示例代码)

    jQuery获取Select选择的Text和Value: 语法解释: 1. $(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$(“#select_id”).find(“option:selected”)...

    MultiSizeScreen:用于模拟各种大小和尺寸的网站的 jQuery 插件和样式表

    在任何按钮上使用 JavaScript 使用 .multiSizeScreen() 来触发事件或在 HTML 按钮元素中使用 data-screen-size 和 data-screen-option; 用法 仅 HTML 例子: &lt;button data-screen-size="iPhone"&gt;iPhone&...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    基于Jquery的自定义下拉框JS插件。 带图标、分组等

    jQuery+ul+javascript 实现的跨浏览器多级菜单

    * 在容器对象 #thetree 上调用 makeTree(option)来构造菜单对象,再调用 addItem 方法添加菜单项 * * 菜单树对象方法: * * makeTree 方法,构造菜单树对象 * json 参数: * @param fold: boolean 菜单初始...

    通过隐藏option实现select的联动效果

    代码如下: &lt;!DOCTYPE html PUBLIC “-//W3C//DTD ... &lt;head&gt; &lt;title&gt;Untitled Page&lt;/title&gt;...script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.m

    jQuery 实现左右两侧菜单添加、移除功能

    JS代码  function toRight(l, r, v) { $(# + l + option:selected).appendTo(# + r); $(# + l + option:selected).remove(); var str = $(# + l + option).map(function () { return $(this).val(); }).get()....

Global site tag (gtag.js) - Google Analytics