zoukankan      html  css  js  c++  java
  • js操作select控件的几种方法发布


    几种js操作select控件的方法,这里基本是整理的比较全了,另外脚本之家特给大家准备了一些相关的文章。让你更深入的了解javascript下select的操作。

    1判断select选项中 是否存在Value="paraValue"的Item

    2向select选项中 加入一个Item

    3从select选项中 删除一个Item

    4删除select中选中的项

    5修改select选项中value="paraValue"的text为"paraText"

    6设置select中text="paraText"的第一个Item为选中

    7设置select中value="paraValue"的Item为选中

    8得到select的当前选中项的value

    9得到select的当前选中项的text

    10得到select的当前选中项的Index

    11清空select的项

    ======================================================================

    js 代码

    // 1.判断select选项中 是否存在Value="paraValue"的Item

    function jsSelectIsExitItem(objSelect,objItemValue) {

    var isExit = false;

    for (var i = 0; i <objSelect.options.length; i++) {

    if (objSelect.options[i].value ==objItemValue) {

    isExit = true;

    break;

    }

    }

    return isExit;

    }

    // 2.向select选项中 加入一个Item

    function jsAddItemToSelect(objSelect,objItemText, objItemValue) {

    //判断是否存在

    if (jsSelectIsExitItem(objSelect,objItemValue)) {

    alert("该Item的Value值已经存在");

    } else {

    var varItem = new Option(objItemText,objItemValue);

    objSelect.options.add(varItem);

    alert("成功加入");

    }

    }

    // 3.从select选项中 删除一个Item

    function jsRemoveItemFromSelect(objSelect,objItemValue) {

    //判断是否存在

    if (jsSelectIsExitItem(objSelect,objItemValue)) {

    for (var i = 0; i <objSelect.options.length; i++) {

    if (objSelect.options[i].value ==objItemValue) {

    objSelect.options.remove(i);

    break;

    }

    }

    alert("成功删除");

    } else {

    alert("该select中 不存在该项");

    }

    }

    // 4.删除select中选中的项

    functionjsRemoveSelectedItemFromSelect(objSelect) {

    var length = objSelect.options.length - 1;

    for(var i = length; i >= 0; i--){

    if(objSelect[i].selected == true){

    objSelect.options[i] = null;

    }

    }

    }

    // 5.修改select选项中 value="paraValue"的text为"paraText"

    function jsUpdateItemToSelect(objSelect,objItemText, objItemValue) {

    //判断是否存在

    if (jsSelectIsExitItem(objSelect,objItemValue)) {

    for (var i = 0; i <objSelect.options.length; i++) {

    if (objSelect.options[i].value ==objItemValue) {

    objSelect.options[i].text = objItemText;

    break;

    }

    }

    alert("成功修改");

    } else {

    alert("该select中 不存在该项");

    }

    }

    // 6.设置select中text="paraText"的第一个Item为选中

    function jsSelectItemByValue(objSelect,objItemText) {

    //判断是否存在

    var isExit = false;

    for (var i = 0; i <objSelect.options.length; i++) {

    if (objSelect.options[i].text ==objItemText) {

    objSelect.options[i].selected = true;

    isExit = true;

    break;

    }

    }

    //Show出结果

    if (isExit) {

    alert("成功选中");

    } else {

    alert("该select中 不存在该项");

    }

    }

    // 7.设置select中value="paraValue"的Item为选中

    function check(){

    var c = document.all.objSelect;

    for (var i=0;i<c.options.length ;i++ ){

    if (c.options(i).value==paraValue){

    c.selectedIndex =i;

    }

    }

    }

    // 8.得到select的当前选中项的value

    var currSelectValue =document.all.objSelect.value;

    // 9.得到select的当前选中项的text

    var currSelectText =document.all.objSelect.options[document.all.objSelect.selectedIndex].text;

    // 10.得到select的当前选中项的Index

    var currSelectIndex =document.all.objSelect.selectedIndex;

    // 11.清空select的项

    document.all.objSelect.options.length = 0;

    详细出处参考:http://www.jb51.net/article/23747.htm

  • 相关阅读:
    第二冲刺阶段第一天
    spring第二冲刺阶段第八天
    spring第二冲刺阶段第七天
    spring第二冲刺阶段第六天
    spring第二冲刺阶段第五天
    spring冲刺第二阶段第四天
    spring第二阶段冲刺第三天
    spring冲刺第二阶段第二天
    SPRING冲刺第二阶段第一天
    spring第一冲刺阶段总结200zi
  • 原文地址:https://www.cnblogs.com/liaoshiyong/p/3150917.html
Copyright © 2011-2022 走看看