• js jquery select 操作 获取值,选中选项,增加,修改,删除


    select示例:

    <select id="sel">
        <option value="1">one</option>
        <option value="2">two</option>
    </select>

    js操作

    var objSelect = document.getElementById("sel");

    一,获取

    // 1.获取选中项的value
    console.log(objSelect.value);
    // 2.获取选中项的index
    console.log(objSelect.selectedIndex);
    // 3.获取选中项的text
    console.log(objSelect.options[objSelect.selectedIndex].text);
    // 4.获取选项数量
    console.log(objSelect.options.length);

    二,选中

    // 1.选中某个value的选项
    objSelect.value = 2;
    // 2.选中某个index的选项
    objSelect.options[1].selected = true;

    三,增加

    // 1.在最后加入选项objSelect.options.add(new Option("three", "3"));

     四,修改

    // 四,修改
    // objSelect.options[i] 获取index为i的元素选项
    // 1.修改选中项的value和text
    objSelect.options[objSelect.selectedIndex] = new Option("four", "4");
    // 2.修改选中项的value
    objSelect.options[objSelect.selectedIndex].value = "new1";
    // 3.修改选中项的text
    objSelect.options[objSelect.selectedIndex].text = "new-one";

    五,删除

    // 两种删除方式
    //objSelect.options[i] = null; // i为index
    //objSelect.options.remove(i);
    // 1.删除选中项
    objSelect.options.remove(objSelect.selectedIndex);
    // 2.删除所有项
    objSelect.options.length = 0;

    jquery操作

    var $select = $("#sel");

    一,获取

    // 1.获取选中项的value
    console.log($select.val());
    // 2.获取选中项的index
    console.log($select.get(0).selectedIndex);
    // 3.获取选中项的text
    console.log($select.find("option:selected").text()); // 不推荐
    // 4.获取选项数量
    console.log($select.find("option").length);
    // 5.获取选项最大的index属性值
    console.log($select.find("option:last").get(0).index); //不推荐

    二,选中

    // 1.选中某个value的选项
    $select.val(2);
    // 2.选中某个index的选项
    $select.get(0).selectedIndex = 1;
    // 3.选中某个text的选项
    $select.find("option:contains('two')").attr("selected", true); // .attr("selected", "selected")也可以
    //$select.find("option[text='two']").attr("selected", "selected"); //× 这种写法是错误的

    三,增加

    // 1.在最后加入选项
    $select.append("<option value='3'>three</option>");
    // 2.在最前加入选项
    $select.prepend("<option value='0'>zero</option>");

    四,修改

    // $select.find("option").get(i) // 获取index为i的元素选项
    // 1.修改选中项的value
    $select.find("option").get(0).value =  "new1";
    // 2.修改选中项的text
    $select.find("option").get(0).text =  "new-one";

    五,删除

    //$select.find("option").get(i).remove() // i为index
    // 1.删除选中项
    $select.find("option").get(0).remove();    // index为0是选中项
    objSelect.options.remove(objSelect.selectedIndex);
    // 2.删除所有项
    $select.find("option").remove();
    // 3.删除第一项,最后一项
    $select.find("option:first").remove();
    $select.find("option:last").remove();
    // 4.删除某value的项
    $select.find("option[value=1]").remove();

    最后: 更为复杂的取赋值需要用到遍历.

  • 相关阅读:
    BZOJ3875 AHOI2014/JSOI2014骑士游戏(动态规划)
    Contest 9
    Contest 8
    Codeforces Round#514 Div.2 翻车记
    Contest 7
    安徽师大附中%你赛day6 T3 Hamsters [POI2010]CHO-Hamsters 解题报告
    2018.8 安徽师大附中培训游记
    安徽师大附中%你赛day5 T3 树上行走 解题报告
    安徽师大附中%你赛day4T2 演讲解题报告
    安徽师大附中%你赛day4T1 金字塔 解题报告
  • 原文地址:https://www.cnblogs.com/ooo0/p/7887006.html
Copyright © 2020-2023  润新知