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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery ajax动态生成table功能示例
Jun 14 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php Session存储到Redis的方法
2013/11/04 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
php阳历转农历优化版
2016/08/08 PHP
javascript使用eval或者new Function进行语法检查
2010/10/16 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
uni-app使用微信小程序云函数的步骤示例
2020/05/22 Javascript
JavaScript中条件语句的优化技巧总结
2020/12/04 Javascript
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
linux环境下的python安装过程图解(含setuptools)
2017/11/22 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
基于Python测试程序是否有错误
2020/05/16 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
企业申诉管理制度
2014/01/30 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
茶花女读书笔记
2015/06/29 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS