JQuery选中select组件被选中的值方法


Posted in jQuery onMarch 08, 2018

jquery获取select选择的文本与值

获取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 “).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:

选项1
选项2
选项3
选项4
选项5
选项6
选项7

选中添加到右边>>
全部添加到右边>>

<<选中删除到左边
<<全部删除到左边

使用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>"));
        }

      }
    });
  })

以上这篇JQuery选中select组件被选中的值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
jQuery Tree Multiselect使用详解
May 02 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
简单实现jQuery手风琴效果
Aug 18 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 #jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 #jQuery
jQuery实现左右滑动的toggle方法
Mar 03 #jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 #jQuery
jQuery幻灯片插件owlcarousel参数说明中文文档
Feb 27 #jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 #jQuery
You might like
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
2016/07/05 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
小程序实现分类页
2019/07/12 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
一波神奇的Python语句、函数与方法的使用技巧总结
2015/12/08 Python
python实现简单socket通信的方法
2016/04/19 Python
python决策树之C4.5算法详解
2017/12/20 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
Python如何在单元测试中给对象打补丁
2020/08/03 Python
python 怎样进行内存管理
2020/11/10 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
高中毕业自我鉴定
2013/12/13 职场文书
董事长助理岗位职责
2014/02/18 职场文书
行政副总岗位职责
2014/02/23 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
建国大业观后感600字
2015/06/01 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL