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表单验证之密码确认
May 22 jQuery
Jquery中attr与prop的区别详解
May 27 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
简述jQuery Easyui一些用法
Aug 01 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
基于jQuery拖拽事件的封装
Nov 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP网络操作函数汇总
2015/05/18 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
node.js中的fs.close方法使用说明
2014/12/17 Javascript
jQuery菜单插件superfish使用指南
2015/04/21 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
微信小程序中用WebStorm使用LESS
2017/03/08 Javascript
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
Django+Vue.js搭建前后端分离项目的示例
2017/08/07 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
Angular使用Md5加密的解决方法
2017/09/16 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
vue动画打包后失效问题的解决方法
2018/09/18 Javascript
vue学习笔记之作用域插槽实例分析
2020/02/01 Javascript
Python第三方库的安装方法总结
2016/06/06 Python
Python AES加密模块用法分析
2017/05/22 Python
python利用有道翻译实现&quot;语言翻译器&quot;的功能实例
2017/11/14 Python
Django choices下拉列表绑定实例
2020/03/13 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Python环境管理virtualenv&amp;virtualenvwrapper的配置详解
2020/07/01 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
python中append函数用法讲解
2020/12/11 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
办公自动化专业大学生职业规划书
2014/03/06 职场文书
观看建国大业观后感
2015/06/01 职场文书
《秋天的怀念》教学反思
2016/02/17 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
python基础之模块的导入
2021/10/24 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
mysql 子查询的使用
2022/04/28 MySQL