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插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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将XML转数组过程详解
2013/11/13 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
JS合并两个数组的3种方法详解
2019/10/24 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
PyQt 线程类 QThread使用详解
2017/07/16 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
JD Sports意大利:英国篮球和运动时尚的领导者
2017/10/29 全球购物
乐高官方旗舰店:LEGO积木玩具
2019/04/06 全球购物
企业趣味活动方案
2014/08/21 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2015年团支书工作总结
2015/04/03 职场文书
Python 文字识别
2022/05/11 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS