`

js-select-option操作

 
阅读更多

// 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中选中的项   
function jsRemoveSelectedItemFromSelect(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为选中   
document.all.objSelect.value = objItemValue;   
      
// 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;

分享到:
评论

相关推荐

    Ant design vue中的a-select在动态给option赋值之后,placeholder失效.pdf

    在实际开发过程中,我们可能会遇到一个常见问题,即当动态地给`a-select`的`option`赋值后,其`placeholder`属性失效,不再显示默认提示文本。这个问题通常出现在数据异步加载的情况下,比如从服务器获取数据并填充...

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    在main.js文件中,定义一个Vue指令'el-select',这个指令会在el-select组件更新时触发。它会根据传入的值(v-model绑定值)、options下拉选项、prop对应options中的value属性、defaultProp默认值判断属性和default...

    angularjs ui-select2 多选下拉所需资源文件

    - select2.min.js:select2的JavaScript库 确保这些文件被正确地引入到你的HTML文件中,并且`select2.min.js`应在`angular-ui-select2.min.js`之前引入,因为ui-select2依赖于select2。 2. **安装和配置**:在你...

    bootstrap-select-1.13.14

    在实际使用中,开发者可以通过引入相应的 CSS 和 JavaScript 文件,以及必要的初始化代码,将 Bootstrap Select 集成到项目中。例如: ```html &lt;link rel="stylesheet" href="path/to/bootstrap-select.min.css"&gt; ...

    el-select获取选中的label值.pdf

    在Vue.js框架中,Element UI库提供了一个丰富的组件集,其中`el-select`是一个常用的下拉选择组件。在处理用户交互时,有时我们需要获取选中项的`label`或`value`值。从提供的信息来看,这里介绍的是如何在不通过...

    javascript 获取select ->option中id、value、label属性及中内容

    javascript 获取select -&gt;option中id、value、label属性及&lt;option&gt;&lt;/option&gt;中内容

    bootstrap-select-1.13.9.zip

    7. **API控制**:通过JavaScript API,可以在运行时动态地操作Select元素,如打开、关闭下拉列表,或者更改选中状态。 在压缩包`bootstrap-select-1.13.9`中,你可能会发现以下内容: - `dist` 文件夹:包含编译后...

    Bootstrap-selectpicker多选框的简单实例

    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"&gt; ``` 接下来,你可以创建一个包含多个`&lt;option&gt;`的`&lt;select&gt;`元素,并为其添加`data-live-search="true"`...

    select option带自定义图片

    总结来说,要实现`&lt;select&gt;`和`&lt;option&gt;`带有自定义图片的效果,我们需要结合HTML的`data-*`属性,JavaScript的动态操作和CSS的样式设计。这不仅增强了用户体验,也展示了前端技术在实现视觉效果方面的灵活性。在...

    bootstrap-select使用示例.rar

    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"&gt; ``` 一旦资源引入完毕,你可以通过JavaScript来初始化Bootstrap Select,或者在文档加载完成后自动执行:...

    bootstrap-select下拉选择搜索框,可以多选和单选

    1. **引入依赖**:首先,确保在页面中引入Bootstrap的CSS和JavaScript文件,以及Bootstrap Select的CSS和JS文件。这些文件可以从官方网站或者CDN获取。 2. **HTML结构**:在HTML中创建`&lt;select&gt;`元素,为每个可选项...

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    JQ JS javascript 多选 多选下拉框 select bootstrap-select

    jQuery是一个广泛使用的JavaScript库,它提供了丰富的DOM操作和事件处理功能,使开发者能更便捷地操纵页面元素。 Bootstrap是流行的前端开发框架,它的设计风格简洁且响应式,包含了一系列预定义的CSS类和...

    bootstrap-select下拉框

    在`bootstrap-select-1.10.0`这个压缩包中,包含了该插件的源码、CSS样式和JavaScript文件,开发者可以根据需求选择合适的版本进行引用。同时,为了实现特定功能或自定义样式,可以查阅官方文档以获取更多配置选项和...

    js实现动态生成select中的option

    在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...

    js 操作select和option

    ### JavaScript 操作 Select 和 Option 的方法详解 在网页开发中,`&lt;select&gt;` 元素是一种常见的表单控件,用于收集用户输入的选择项。它通常包含多个 `&lt;option&gt;` 子元素供用户选择。通过 JavaScript,我们可以实现...

    bootstrap-select-1.13.0-dev.zip

    同时,`&lt;option&gt;`元素上的`disabled`属性会体现在Bootstrap Select中。 8. **分组选项**:如果你的`&lt;select&gt;`元素包含`&lt;optgroup&gt;`标签,Bootstrap Select会自动处理这些选项组,呈现为有标题的分组。 9. **搜索...

    Bootstrap-selectpicker多选框插件的demo源码

    4. **初始化插件**:在文档加载完毕后,你需要使用JavaScript来初始化selectpicker插件,例如:`$('select').selectpicker();`。这样,普通的HTML选择器就会被转换成具有Bootstrap样式的可交互组件。 5. **事件处理...

    bootstrap-select下拉复选框.rar

    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"&gt; &lt;select class="selectpicker" multiple data-live-search="true"&gt; &lt;option&gt;Option 1&lt;/option&gt; &lt;option...

    jQuery multiple-select-master 插件

    总的来说,jQuery multiple-select-master插件以其强大的功能和易用性,为网页开发中的多选操作带来了便利,无论是小型项目还是大型应用,都能看到它的身影。熟练掌握并运用这个插件,无疑能提升我们的开发效率,为...

Global site tag (gtag.js) - Google Analytics