zoukankan      html  css  js  c++  java
  • Jquery 操作 select 的操作指南

    这里我们以一个简单的select作为原型来进行说明:

    <select>
            <option value="a1">香蕉1</option>
            <option value="a2">香蕉2</option>
            <option value="a3">香蕉3</option>
            <option value="a1">香蕉4</option>
            <option value="a4">香蕉5</option>
            <option value="a5">香蕉6</option>
            <option value="a6" selected ="selected">香蕉7</option>
            <option value="a7">香蕉8</option>
            <option value="a8">香蕉9</option>
            <option value="a9">香蕉0</option>
    </select>

    1.获取/设置当前option的value值

    $('select').val();    //获取值
    $('select').val('a8');     //设置值

    2.获取/设置当前option的文本:注意:.find("option[text='.......']")适用于input标签,不适用与select标签

    var text = $("select").find("option:selected").text();  //获取text
    $("select").find("option:contains('香蕉4')").attr("selected",true);  //设置当前option的text

    3.获取/设置当前option的index:

    var checkIndex=$("select").get(0).selectedIndex;  //获取index
    $("select").get(0).selectedIndex=2;    //设置index,index从0开始计数

    4.常见的添加/删除option操作:

    1. $("select").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项)
    2. $("select").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)
    3. $("select option:last").remove();  //删除Select中索引值最大Option(最后一个)
    4. $("select option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)
    5. $("select option[value='3']").remove();  //删除Select中Value='3'的Option
    6. $("select option[text='4']").remove();  //删除Select中Text='4'的Option
  • 相关阅读:
    P2761 软件补丁问题
    CF1335F Robots on a Grid
    [bzoj2088]P3505 [POI2010]TEL-Teleportation
    CF1335E Three Blocks Palindrome
    P3831 [SHOI2012]回家的路
    P4568 [JLOI2011]飞行路线(分层图)
    P4774 [NOI2018]屠龙勇士
    P2480 [SDOI2010]古代猪文
    CF #632 (Div. 2) 对应题号CF1333
    BSGS 和扩展
  • 原文地址:https://www.cnblogs.com/zpdMulti/p/596957458_qq10.html
Copyright © 2011-2022 走看看