首页 > 其他分享 >jQuery 操作select

jQuery 操作select

时间:2023-08-11 21:45:07浏览次数:29  
标签:jQuery ddlregtype option text select1 操作 id select

jQuery取得select选中的值

    本来以为jQuery("#select1").val();是取得选中的值,
     
    那么jQuery("#select1").text();就是取得的文本。
     
    这是不正确的,正确做法是:
     
    jQuery("#select1  option:selected").text();

jQuery取得select选择的文本与值

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 ").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:

           <div class="centent">
                <select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">
                    <option value="1">选项1</option>
                    <option value="2">选项2</option>
                    <option value="3">选项3</option>
                    <option value="4">选项4</option>
                    <option value="5">选项5</option>
                    <option value="6">选项6</option>
                    <option value="7">选项7</option>
                </select>
                <div>
                    <span id="add">选中添加到右边&gt;&gt;</span>
                    <span id="add_all">全部添加到右边&gt;&gt;</span>
                </div>
            </div>
            <div class="centent">
                <select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">
                </select>
                <div>
                    <span id="remove">&lt;&lt;选中删除到左边</span>
                    <span id="remove_all">&lt;&lt;全部删除到左边</span>
                </div>
            </div>

使用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>"));
                        }
        
                    }
                });
            })
————————————————
版权声明:本文为CSDN博主「Trouble-Solver」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/syq8023/article/details/93083172/

标签:jQuery,ddlregtype,option,text,select1,操作,id,select
From: https://www.cnblogs.com/sunzzhankui/p/17623998.html

相关文章

  • 图像处理技巧形态学滤波之腐蚀操作
    1.引言欢迎回来,我的图像处理爱好者们!今天,让我们深入研究图像处理领域中的形态学计算。这些非线性的图像处理技术允许我们操纵图像中对象的形状和结构。在本系列中,我们将依次介绍四种基本的形态学操作:腐蚀、膨胀、开操作和闭操作。闲话少说,我们直接开始吧!2.腐蚀操作原理腐蚀是常见......
  • 【python技巧】文本文件的读写操作
    【python技巧】文本文件的读写操作0.背景最近在写后端接口的时候,需要对.c、.conf等类型的文件进行读写操作,在这里整理一下学习收获。1.file库的文件操作file库是python中用于处理文件的读取、修改等操作,引入方式为importfile1.1打开文件---file.open()使用open()函数......
  • 传奇架设技术教程分享提示非法操作引起kernel32出错的原因分析
    使用Windows9x/Me做传奇服务器端的朋友最害怕的便是突然屏幕上出现“非法操作”的提示(游戏角色倒档),而其中的显示信息又常常涉及kernel32.dll这个文件,那么kernel32.dll是什么,如何应对与解决这类问题呢?相信传奇一条龙下面这篇文章会为你指点迷津。一、什么是kernel32内核文件......
  • 区块链应用操作员认证(4级)在这里
    区块链应用操作员,是指运用区块链技术及工具,从事政务、金融、医疗、教育、养老等场景系统应用操作的人员。腾讯作为广东省第一批公布的社会培训评价组织,可开展职业技能等级认定职业(工种)区块链应用操作员(4-3-2-1级)。证书含金量证书是劳动者求职、任职的凭证之一,是用人单位招聘、......
  • MongoDB索引操作和执行计划Explain()详解
    一、索引操作说明,下面的内容举例时,以"dailyTrip"collection为例。字段内容如下:{"_id":ObjectId("63ec5a971ddbe429cbeeffe3"),//objectid"car_type":"Gett",//string"date":ISODate("2016-04-01T0......
  • SSH隧道代理实际操作指南
    在如今的互联网时代,许多网站和应用在某些地区受到限制和封锁,导致用户无法自由访问和享受在线资源。为了突破这一限制,SSH隧道代理成为了一种简单有效的工具。本文将详细介绍SSH隧道代理的原理、使用方法以及一些实际操作技巧,让您轻松畅游互联网。在介绍SSH隧道代理之前,我们先了解下S......
  • 安装Linux操作系统
    LAMP是一种非常常见的开源软件套件,包括Linux操作系统、ApacheHTTP服务器、MySQL数据库和PHP编程语言。它被广泛应用于构建动态网站和Web应用程序。本文将介绍如何安装和配置LAMP服务器,以实现可靠高性能的网站和应用程序运行环境。一、安装Linux操作系统在安装LAMP之前,首先需要选......
  • C++多线程不加锁操作同一个整数
    #include<iostream>#include<thread>#include<vector>#include<chrono>#include<atomic>usingnamespacestd;intnum=0;//volatileintnum=0;//atomic<int>num=0;voidadd(){inttimes=0;for(int......
  • 《最新出炉》系列初窥篇-Python+Playwright自动化测试-11-playwright操作iframe-上篇
    1.简介原估计宏哥这里就不对iframe这个知识点做介绍和讲解了,因为前边的窗口切换就为这种网页处理提供了思路,另一个原因就是虽然iframe很强大,但是现在很少有网站用它了。但是还是有小伙伴或者童鞋们私下问这个问题,那么宏哥就单独写一篇关于iframe网页处理的文章。iframe是web自动......
  • IfcModulusOfSubgradeReactionSelect
    IfcModulusOfSubgradeReactionSelect类型定义垫层测量,表示每个区域的结构面项目的垫层。TRUE表示无限刚度(刚度)。FALSE表示无硬度(释放)。数值表示有限的线性弹性刚度。 IFC4中的新型。 EnumerationdefinitionConstantDescriptionIfcBoolean IfcModulusOfSubgrade......