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实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
jquery图片放大镜效果
Jun 23 jQuery
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
Jquery+javascript实现支付网页数字键盘
Dec 21 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字符比较函数similar_text、strnatcmp与strcasecmp用法分析
2014/11/18 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
jQuery 获取对象 定位子对象
2010/05/31 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
浅谈jquery点击label触发2次的问题
2016/06/12 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
Angular2搜索和重置按钮过场动画
2017/05/24 Javascript
Angular.js中上传指令ng-upload的基本使用教程
2017/07/30 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
微信小程序页面生命周期详解
2018/01/31 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
2018/05/14 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
环形加载进度条封装(Vue插件版和原生js版)
2019/12/04 Javascript
js实现批量删除功能
2020/08/27 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
python插入数据到列表的方法
2015/04/30 Python
Python之os操作方法(详解)
2017/06/15 Python
使用CSS3编写类似iOS中的复选框及带开关的按钮
2016/04/11 HTML / CSS
基于HTML5的WebSocket的实例代码
2018/08/15 HTML / CSS
西铁城美国官方网站:Citizen Watch美国
2019/11/08 全球购物
白血病捐款倡议书
2014/05/14 职场文书
2014年收银工作总结
2014/11/13 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
党员发展大会主持词
2015/07/03 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL