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版本 1.x? 2.x? 3.x?
Apr 01 jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
jQuery 移除事件的方法
Jun 20 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压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
destoon二次开发入门示例
2014/06/20 PHP
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
jquery得到font-size属性值实现代码
2013/09/30 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
2019/05/16 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
英国DIY和家居装饰领域的主要品牌:Wickes
2019/11/26 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
行政人事岗位职责
2014/03/17 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
检讨书格式范文
2015/05/07 职场文书
中秋晚会致辞
2015/07/31 职场文书
Python序列化与反序列化相关知识总结
2021/06/08 Python
Android Flutter实现3D动画效果示例详解
2022/04/07 Java/Android