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实现多级菜单效果
Jul 25 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现轮播图效果
Nov 26 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
深入分析jQuery.one() 函数
Jun 03 jQuery
jQuery实现带进度条的轮播图
Sep 13 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 5.5 新特性
2013/07/02 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
javascript parseInt 大改造
2009/09/27 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
2010/05/26 Javascript
js绑定事件this指向发生改变的问题解决方法
2013/04/23 Javascript
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
使用jquery.upload.js实现异步上传示例代码
2014/07/29 Javascript
jQuery中:checkbox选择器用法实例
2015/01/03 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
jQuery中Find选择器用法示例
2016/09/21 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
浅谈python对象数据的读写权限
2016/09/12 Python
python getopt详解及简单实例
2016/12/30 Python
Python装饰器实现几类验证功能做法实例
2017/05/18 Python
Python 3中print函数的使用方法总结
2017/08/08 Python
Python绑定方法与非绑定方法详解
2017/08/18 Python
Django CBV类的用法详解
2019/07/26 Python
以SQLite和PySqlite为例来学习Python DB API
2020/02/05 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
AmazeUI导航的示例代码
2020/08/14 HTML / CSS
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
关于Java finally的面试题
2016/04/27 面试题
自荐书封面下载
2013/11/29 职场文书
招聘单位介绍信
2014/01/14 职场文书
质量保证书范本
2014/04/29 职场文书
激励口号大全
2014/06/17 职场文书
大学生作弊检讨书
2014/09/11 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
圆明园观后感
2015/06/03 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS