• jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等


    简介jquery里对select进行各种操作的方法,如联动、取值、根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等。

        这一章,站长总结一下jquery里对下拉框select的各种操作,如两个或三个select下拉框的联动效果,读取select下拉框里选中项的值和文本,根据指定的值或文本来选中select下拉框的指定项等操作,先来看具体的在线实例演示:

    jquery操作下拉框select的各种方法在线实例演示

    下面是上面在线实例的截图:

    [jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等_1]

    1.先说select下拉框联动效果的实现,大家可以点下面的链接查看,里面有很完整的代码及讲解:

    jquery三级联动select下拉菜单特效的实现方法和在线实例展示

    2.根据指定的文本来选中select下拉框指定的optilon选项,在网上搜索,基本上说的都是用下面的方法:
    $(".selector").find("option[text='angeleb']").attr("selected",true);

    但是站长要说,上面的方法是不正确的,至少站长在测试的时候,根本就不起作用,站长用的jquery库的版本是1.7的,测试了好几次都不成功,站长用的方法是下面这样的:
    <script language="javascript">
    var VZhi=$("#TZhi").val();
    $("#S1 option").each(function(i,n){
    if($(n).text()==VZhi){
        $(n).attr("selected",true);
    }  
    });
    </script>


    3.根据指定的值来选中select下拉框中指定的option选项:
    <script language="javascript">
    var VZhi=$("#VZhi").val();
    $("#S1 option[value='"+VZhi+"']").attr("selected","selected");
    </script>


    4.获取select下拉框选中项的option的值:
    var S3=$("#S3 option:selected").val();


    5.获取select下拉框选中项的option的text文本:
    var S2=$("#S2 option:selected").text()


    6.动态增加或删除option选项:
    //为Select的末尾追加一个Option下拉项
    $("#select").append("<option value='Value'>Text</option>");
     
    //在Select的开头追加一个Option下拉项
    $("#select").prepend("<option value='0'>请选择</option>");
     
    //删除Select中索引值最大(最后一个)Option
    $("#select option:last").remove();
     
    //删除Select中索引值为0(第一个)的Option
    $("#select option[index='0']").remove();
     
    //删除Select中Value='3'的Optiona
    $("#select option[value='3']").remove();

  • 相关阅读:
    Android textAppearance的属性设置及TextView属性详解
    Eclipse Hot Keys
    面向对象(一)
    Java基础知识(下)
    code2uml使用教程
    AndroidDevTools简介
    idea2020.3 安装插件JetBrains 插件市场安装 Cloud Toolkit
    在 Mac 上撰写和格式化备忘录-添加提醒-添加日历
    macbook-键盘连击问题002
    创业团队建设与管理
  • 原文地址:https://www.cnblogs.com/cuihongyu3503319/p/10729216.html
Copyright © 2020-2023  润新知