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实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
jQuery返回定位插件详解
May 15 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
详解JQuery基础动画操作
Apr 12 jQuery
jQuery中DOM操作原则实例分析
Aug 01 jQuery
jquery实现点击弹出对话框
Feb 08 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jquery实现简单拖拽效果
Jul 20 jQuery
jquery实现简单自动轮播图效果
Jul 29 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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
php字符串操作常见问题小结
2016/10/11 PHP
PHP中使用OpenSSL生成证书及加密解密
2017/02/05 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
ES6概念 Symbol toString()方法
2016/12/25 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
js实现数字滚动特效
2019/12/16 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
基python实现多线程网页爬虫
2015/09/06 Python
Python实现列表删除重复元素的三种常用方法分析
2017/11/24 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
python最长回文串算法
2018/06/04 Python
Python Dataframe 指定多列去重、求差集的方法
2018/07/10 Python
python使用matplotlib绘制热图
2018/11/07 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
玖熙女鞋美国官网:Nine West
2016/10/06 全球购物
教师节活动总结
2014/08/29 职场文书
企业计划生育责任书
2015/05/09 职场文书
详解Vue的options
2021/05/15 Vue.js