jQuery取得设置清空select选择的文本与值


Posted in Javascript onJuly 08, 2014

获取select :
获取select 选中的 text :

$("#ddlregtype").find("option:selected").text();

获取select选中的 value:

$("#ddlregtype ").val();

获取select选中的索引:

$("#ddlregtype ").get(0).selectedindex;

设置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_id option[text='jquery']").attr("selected", true);

设置select option项:

$("#select_id").append("<option value='value'>text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index='0']").remove();//删除索引值为0的option
$("#select_id option[value='3']").remove(); //删除值为3的option
$("#select_id option[text='4']").remove(); //删除text值为4的option

清空 select:

$("#ddlregtype ").empty();

工作需要,要获得两个表单中的值。如图:

如何获得从左边选择框添加到右边选择框中的值?我想了想用网页特效可以获得,这里用了比较流行的jquery。
js代码如下:

//获取所有属性值 var item = $("#select1").val();
$(function(){
$('#select1').each( //获得select1的所有值
function(){
$('button').click(function(){
alert($('#select2').val()); //获得select2中的select1值
});
});
})
</script>

值得注意的是,不能直接写成

$(function(){
$('#select2').each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。
function(){
$('button').click(function(){
alert($(this).val()); //获得select2中的select1值
});
});
})

html:

<div class="centent">
<select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add" >选中添加到右边>></span>
<span id="add_all" >全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>

使用JQuery,Ajax调用动态填充Select的option选项

//绑定ClassLevel1单击事件
$("#ClassLevel1").change(function () {
var id = $("#ClassLevel1").val();
var level2 = $("#ClassLevel2");
level2.empty();
$("#ClassLevel3").hide();
$.ajax({
url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
data: { "type": "ajax" },
datatype: "json",
type: "get",
success: function (data) {
var json = eval_r(data);
for (var ind in json) {
level2.append($("<option value='" + json[ind].id + "'>" + json[ind].typename + "</option>"));
}

}
});
})
Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
javascript html5 canvas实现可拖动省份的中国地图
Mar 11 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
js在ie下打开对话窗口的方法小结
Oct 24 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
微信小程序bindinput与bindsubmit的区别实例分析
Apr 17 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
JavaScript 获取滚动条位置并将页面滑动到锚点
Feb 08 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
Jul 08 #Javascript
Javascript遍历table中的元素示例代码
Jul 08 #Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 #Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 #Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 #Javascript
jquery中each方法示例和常用选择器
Jul 08 #Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 #Javascript
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
php使用Cookie实现和用户会话的方法
2015/01/21 PHP
php可应用于面包屑导航的递归寻找家谱树实现方法
2015/02/02 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
ASP小贴士/ASP Tips javascript tips可以当桌面
2009/12/10 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
python进程管理工具supervisor使用实例
2014/09/17 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
浅析python 动态库m.so.1.0错误问题
2020/05/09 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
《藏戏》教学反思
2014/02/11 职场文书
优秀语文教师事迹
2014/05/18 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
python3实现常见的排序算法(示例代码)
2021/07/04 Python
HTML中的表格元素介绍
2022/02/28 HTML / CSS