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 Form轻松实现文件上传
May 24 jQuery
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery图片预览插件实现方法详解
Jul 18 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 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的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
php查询ip所在地的方法
2014/12/05 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
Javascript String对象扩展HTML编码和解码的方法
2009/06/02 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
jQuery 计算iframe 窗口大小的方法
2014/05/13 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python中的字典详细介绍
2014/09/18 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python3使用matplotlib绘制散点图
2019/03/19 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python绘制玫瑰的实现代码
2020/03/02 Python
jupyter实现重新加载模块
2020/04/16 Python
matplotlib 画双轴子图无法显示x轴的解决方法
2020/07/27 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
python脚本定时发送邮件
2020/12/22 Python
十周年庆典策划方案
2014/06/03 职场文书
自主招生学校推荐信
2014/09/26 职场文书
二年级学生期末评语
2014/12/26 职场文书
投诉信范文
2015/07/02 职场文书
表扬信范文
2019/04/22 职场文书
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js