<html>
<head>
<script language="JavaScript">
<!--
function moveOptions(objPush,objGet) {
for (var i=0;i<objPush.length;i++) {
if (objPush.options[i].selected) {
var pushOpt = objPush.options[i];
objGet.options.add(new Option(pushOpt.innerText, pushOpt.value));
objPush.remove(i);
i = i - 1;
}
}
}
function lookValue(objId) {
var obj = document.getElementById(objId);
for (var i=0;i<obj.length;i++) {
if (obj.options[i].selected) {
alert('value:'+obj.options[i].value);
alert('description:'+obj.options[i].innerText);
}
}
}
//-->
</script>
</head>
<body>
<table>
<tr>
<td>
<select multiple id="goObj" name="goObj" size="10">
<option value="A">XHTML</option>
<option value="B">CSS</option>
<option value="C">JAVASCRIPT</option>
<option value="D">XML</option>
<option value="E">PHP</option>
<option value="F">C#</option>
<option value="G">JAVA</option>
<option value="H">C++</option>
<option value="I">PERL</option>
</select>
</td>
<td>
<input type="button" onclick="moveOptions(document.getElementById('goObj'),document.getElementById('backObj'))" value=">>"/>
<input type="button" onclick="moveOptions(document.getElementById('backObj'),document.getElementById('goObj'))" value="<<"/>
</td>
<td>
<select multiple id="backObj" name="backObj" size="10" >
</select>
</td>
</tr>
<tr>
<td colspan="3">
<input type="button" onclick="lookValue('goObj')" value="submit"/>
</td>
</tr>
</table>
</body>
</html>
分享到：
相关推荐
"layui-select-multiple"就是Layui专门为多选下拉框设计的一整套样式和功能。 首先，我们来看“layui多选下拉框样式”这一知识点。Layui的多选下拉框在视觉上非常整洁，其设计遵循了扁平化和简洁化的理念，与现代...
综上所述，"下拉多选select multiple"在Bootstrap中通常需要结合第三方库如Select2来实现，它不仅提供了多选功能，还增强了用户体验，通过搜索功能使得在大量选项中查找变得轻松。在实际应用中，我们还需要关注性能...
综上所述，jQuery实现的select互斥联动是一种常见的前端交互设计，通过监听和处理事件，动态调整下拉列表的选项，以满足不同场景下的用户需求。在理解基本原理后，可以根据具体项目需求进行扩展和优化。
在网页设计和开发中，"select_multiple三级分类级联"是一种常见的交互元素，主要用于实现多级选择的功能。这种技术常用于商品分类、地区选择、层级菜单等场景，以提供用户友好的选择体验。例如，在淘宝发布商品时，...
此外，JavaScript库如jQuery或Vue.js可以用于增强交互性，比如实时更新选定值或实现动态加载选项。 3. **获取和处理选择的值** 在JavaScript中，可以使用 `querySelectorAll` 或 `getElementsByClassName` 等方法...
此外，还可以通过JavaScript或jQuery实现更复杂的交互，比如模拟多选框的视觉效果，或者添加动态加载、搜索过滤等功能。 ### 五、浏览器兼容性 `<select>`标签的`multiple`属性在所有主流浏览器（包括Chrome、Fire...
### 使用JavaScript实现不按Ctrl键实现Multiple Select多选 在Web开发中，有时我们需要让用户能够更方便地选择多个选项而不必使用键盘上的Ctrl键。这种功能可以提高用户体验，并且适用于那些希望快速完成任务的用户...
在IT行业中，前端开发是不可或缺的一部分，而"multiple-select-1.5.2_lamp7ds_css/multiple-select_"这个标题暗示着一个专门用于实现HTML select元素多选功能的库。这个库可能是一个JavaScript插件，它使得用户在...
而"jQuery Multiple Select"则是jQuery的一个插件，专门用于实现下拉框的多选功能，使得用户可以在下拉菜单中选择多个选项，极大地提高了交互体验。这个插件在各种需要用户进行多项选择的场景中十分实用，例如设置...
本项目“zhuyongzhengs-layui-select-multiple-master.zip”专注于layui框架下实现下拉框select组件的多选功能，并能获取选定值，这对于构建具有交互性用户界面的应用程序非常有用。 layui的select组件是其表单元素...
然后，引入`multiple-select.css` 和 `multiple-select.js` 文件，这两个文件位于解压后的“multiple-select-master”目录中，分别负责样式和功能实现。 2. **标记元素**：在HTML中，为需要应用插件的`<select>`...
这里我们将探讨如何利用`input+select(multiple)`结构来达到这个目的，并解决在动态绑定下拉框选项时遇到的问题。 首先，`input`元素通常被用来创建一个文本输入框，让用户自由输入信息。而`select`元素则用于创建...
在这个特定的案例中，“重构《实现select multiple左右添加和删除功能》”是一个关于如何优化多选下拉框（select multiple）操作的实践。该博文的作者通过提供一个名为`multipleSelect.html`的示例文件，展示了如何...
4. **多选功能**：通过设置 `multiple` 属性，select2可以实现多选功能，如 `$("#mySelect").select2({ multiple: true });` 5. **搜索过滤**：内置的搜索功能让用户能快速找到所需的选项，只需在配置中开启 `...
综上所述，Select2 是一个功能强大的下拉列表插件，能帮助开发者轻松实现动态模糊查询、多选、分组等功能，提升用户体验。只需正确引入资源、初始化Select2并适当配置，就能将其功能融入到你的网页中。
本示例主要讲解如何使用`<select>`的`multiple`属性创建一个多选下拉框，并通过JavaScript来处理用户的选择。 首先，`<select>`标签的`multiple`属性是关键，它告诉浏览器该下拉列表支持多选。例如： ```html ...
这个压缩包“Select Multiple Values from Combobox Using JavaScript.zip”很可能包含了一个简单的示例，演示如何使用JavaScript来实现多选下拉列表的功能。在网页中，这种功能通常通过HTML的`<select>`元素配合`...
同时，JavaScript或jQuery可以用来监听用户的选择变化，以实现动态交互。 接下来，我们来看`input`元素。通常，`input`元素与`type`属性结合使用，创建不同类型的输入框，如文本、密码、日期等。但是，`input`本身...