写设计器的时候，总是需要对某些属性进行多选项的处理，总是用jquery处理，不能忘了本啊，写个纯JS的小例子复习一下。
这个小例子实现功能：
1.新增选项
2.删除选项
3.回显选项的Value和Text值
PS:回显信息功能只针对chrome和Firefox浏览器，IE浏览器请自觉转换监听方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>多选测试</title>
<body>
<div style="text-align:center">
<label for="op">输入Value</label><input type="text" id="opValue" />
<label for="op">输入Text</label><input type="text" id="opText" />
<input value="重置" type="button" onclick="reset()" />
<input value="新增" type="button" onclick="addOp()" />
<input value="删除" type="button" onclick="deleteOp()" />
</div>
<div style="text-align:center;margin-left:-73px;">
<select id="msel" style="width:155px;" multiple="multiple">
<option value="1">a1</option>
<option value="2">a2</option>
<option value="3">a3</option>
</select>
</div>
</body>
<script>
//新增option
function addOp(){
var msel =document.getElementById('msel');
var opValue = document.getElementById('opValue').value;
var opText = document.getElementById('opText').value;
var op = "<option value='"+opValue+"'>"+opText+"</option>";
msel.innerHTML+=op;
}
//删除选中option
function deleteOp(){
var msel =document.getElementById('msel');
var selLength = msel.options.length;
for (var i=0;i<selLength;i++){
var current = msel.options[i];
if (current.selected){
msel.options.remove(i);
}
}
}
//重置输入框
function reset(){
document.getElementById('opValue').value="";
document.getElementById('opText').value="";
}
//回显选中的option的Value和Text值
document.getElementById('msel').addEventListener('click',function(e){
var target = e.target;
var tagName = target.tagName.toLowerCase();
if (tagName=='option'){
document.getElementById('opValue').value=target.value;
document.getElementById('opText').value=target.text;
}
})
</script>
</html>
相关推荐
本文将深入探讨如何使用JavaScript来创建和操作多选下拉框。 首先，HTML基础是构建多选下拉框的起点。一个基本的多选下拉框通过`<select>`标签创建，`multiple`属性用于开启多选功能。例如： ```html 选项1 ...
在Bootstrap中实现多选下拉框可以极大提升用户体验，使得用户在有限的空间内可以选择多个选项。以下是如何使用Bootstrap来创建这样一个功能的详细步骤。 首先，确保你已经在你的项目中引入了Bootstrap的相关资源。...
JS多选下拉框，实现多选。点击显示下拉。 <script type="text/javascript"> <!-- function $(e){return document.getElementById(e) ;} $('btnSelect').onclick = function () { //§ó§ï?? $('status')....
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了 JavaScript 的操作，包括DOM操作、事件处理、动画效果以及Ajax交互等。在这个"jQuery 多选下拉框实例"中，我们关注的是如何在HTML的下拉选择...
此外，Layui的多选下拉框还支持搜索功能，用户可以在下拉框内输入关键字快速筛选选项，大大提高了操作效率。 关于“取值”，在Layui的多选下拉框中，你可以通过JavaScript事件来获取用户的选择。当用户完成选择后，...
《jQuery实现的多选下拉框深度解析》 在网页开发中，为了提供更好的用户体验，我们经常需要使用到多选下拉框。jQuery库为我们提供了丰富的功能，使得创建交互式的多选下拉框变得轻而易举。在这里，我们将深入探讨...
本文将深入探讨如何创建一个自定义的多选下拉框控件，以提升用户体验，并利用Ajax技术实现异步更新，提高页面的响应速度。 一、多选下拉框控件的理解 多选下拉框控件是一种允许用户从一系列选项中选择多个值的UI...
在网页开发中，多选下拉框是一种常见的用户交互元素，它允许用户在下拉菜单中选择多个选项。本主题将深入探讨如何使用JavaScript库，尤其是jQuery和Bootstrap，来实现这种功能。`bootstrap-select`是Bootstrap框架的...
**基于jQuery实现的多选下拉框** 在Web开发中，传统的HTML下拉框（`<select>`元素）通常只支持单选，但有时我们可能需要一个可多选的下拉框来提供用户更多的选择灵活性。这篇教程将详细介绍如何利用jQuery库来创建...
EXT3.2 多选下拉框是一种在EXT JS框架中实现的用户界面组件，它允许用户在下拉菜单中选择多个选项。EXT JS是一个基于JavaScript的富客户端应用开发框架，用于构建桌面级的Web应用。EXT3.2是EXT JS的一个版本，尽管...
多选下拉框的基本结构通常包括一个隐藏的`<select>`元素和一组可见的`<label>`与`<input type="checkbox">`。每个`<label>`包裹一个`<input>`，并与其关联一个`<option>`，通过`for`属性链接`<input>`与`<option>`...
在网页开发中，多选下拉框是一种常见的用户交互元素，允许用户在多个选项中进行复选选择。这里我们将深入探讨“bootstrapSelect”和“EasyUI”这两种流行的前端框架实现多选下拉框的方法，以及它们所依赖的文件。 ...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它简化了 DOM 操作、事件...以上就是利用 jQuery 创建可多选下拉框的基本步骤和相关技术点，通过这种方式，你可以创建一个易于使用且具有交互性的多选下拉框。
总之，"select多选下拉框美化"是一个涉及前端多个领域的任务，需要结合jQuery的动态操作和CSS的样式定制，通过创新的布局和交互设计，为用户提供更优质的使用体验。在实际应用中，开发者还需要根据项目需求和用户...
Bootstrap是流行的前端开发框架，它提供了预设的CSS样式和JavaScript插件，可以快速构建美观的多选下拉框。Bootstrap的`<select>`组件配合`data-toggle="dropdown"`和`multiple`属性，可以轻松创建响应式的多选...
**jQuery多选下拉框插件详解** 在Web开发中，多选下拉框是一种常见的交互元素，它允许用户在一组选项中选择多个值。jQuery作为最流行的JavaScript库之一，提供了许多插件来增强这种用户体验。`jquery.multi-select....
ExtJS 是一个强大的JavaScript应用程序框架，用于构建交互式的Web...这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、方法以及行为调整等多个方面，使得在ExtJS应用中实现多选下拉框变得更加简单和便捷。
然而，为了提供更好的用户体验和更丰富的样式，我们通常会使用JavaScript或者一些前端框架（如jQuery、Vue.js、React等）来定制这个多选下拉框。从标题来看，这里的实现可能是一个独立的JavaScript组件。 在描述中...
《jQuery.multiselect.js：打造高效多选下拉框选择体验》 在Web开发中，下拉框（Dropdown）是常用的一种交互元素，尤其在需要用户从多个选项中进行选择时。然而，传统的HTML `<select>` 标签在处理大量选项或需要...
《layui-多选下拉框-xm-select：前端开发中的高效解决方案》 在现代Web开发中，用户界面的交互性和易用性是至关重要的。layui框架以其轻量级、高效和丰富的组件库，成为了众多开发者青睐的选择。尤其在构建多选...