<html>
<head>
<title>xiejiaohui test javascript</title>
<script>
function add() {
var pos1 = document.getElementById("pos1");
var pos2 = document.getElementById("pos2");
for (var i = 0; i < pos1.options.length; i++) {
if (pos1.options[i].selected) {
var t = document.createElement("OPTION");
t.value = pos1.options[i].value;
t.text = pos1.options[i].text;
pos2.add(t);
pos1.options[i] = null;
i--;
}
}
}
function del() {
var pos1 = document.getElementById("pos1");
var pos2 = document.getElementById("pos2");
for ( var i = 0; i < pos2.options.length; i++) {
if (pos2.options[i].selected) {
var t = document.createElement("OPTION");
t.value = pos2.options[i].value;
t.text = pos2.options[i].text;
pos1.add(t);
pos2.options[i] = null;
i--;
}
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="#">
<table>
<tr>
<td><select multiple="multiple" name="pos1" id="pos1" >
<option value="1">aaaa</option>
<option value="2">bbbb</option>
<option value="3">cccc</option>
<option value="4">dddd</option>
</select></td>
<td>
<input type="button" value="add=>" onClick="add()"/><br>
<input type="button" value="<=del" onClick="del()"/>
</td>
<td>
<select multiple="multiple" name="pos2" id="pos1">
</select>
</td>
</form>
</body>
</html>
分享到：
相关推荐
要实现这样的功能，我们首先需要在JSP中设置两个select元素，并用JavaScript绑定事件监听器。当第一个select的值改变时，触发AJAX请求。请求的URL通常是一个后台处理程序，由JSP编写，负责从数据库（这里是MySQL）中...
本话题聚焦于使用jQuery来实现两个select元素之间的选中值互换功能。这对于用户界面设计，尤其是在需要双向联动或者数据交换的场景下，是一个实用的功能。 首先，我们要了解HTML中的`<select>`元素。它是创建下拉...
在本文中，我们将深入探讨如何利用 jQuery 来操作两个 `<select>` 元素，实现值之间的互相传递。这对于构建动态表单或者需要用户交互选择的界面非常有用。 首先，我们需要理解 `<select>` 元素在 HTML 中的作用。`...
在页面加载完成后，使用JavaScript来初始化Select2。在`<script>`标签中添加以下代码： ```javascript $(document).ready(function() { $('.js-data-example-instance').select2(); }); ``` 这行代码告诉Select2去...
首先，我们需要创建两个Select控件，分别代表省份和城市。HTML代码可能如下： ```html <select id="province" name="province" onchange="loadCities(this.value)"> <!-- 省份选项 --> </select> <select id=...
`Element UI`是一个广泛使用的开源UI框架，它提供了许多预设的、美观的组件，如`Select`（下拉选择器）和`Tree`（树形结构）。在某些场景下，开发者可能需要将这两种组件结合，以满足特定的需求，例如实现一个既具备...
在给定的代码片段中，`functionlistQuery()` 和 `functionpageQuery(pageNo)` 这两个函数展示了如何在JavaScript中通过修改`window.location.href`属性来构建一个包含多个查询参数的URL。这里的关键在于使用了字符串...
在Web开发中，经常需要实现两个下拉列表（select元素）中选项（option元素）的相互添加或移动操作。这种操作可以通过纯JavaScript或jQuery来实现。上述内容提供了一个使用jQuery实现该功能的插件示例。以下详细介绍...
在介绍如何使用JavaScript实现无限级select联动菜单之前，我们需要了解一些基础知识。首先，什么是select联动菜单？这是一个常见的网页界面元素，用户在选择一个下拉列表中的选项后，另一个下拉列表会根据选择的内容...
今天，我们将讨论一个特定的话题：如何使用AngularJS来实现基于一个下拉菜单（select）的选择项来动态改变另一个下拉菜单的选项值。 首先，我们需要理解 AngularJS 中的数据绑定机制。通过使用 ng-model 指令，我们...
1. **创建HTML结构**：首先，我们需要在HTML中定义两个select元素，分别代表一级菜单和二级菜单。一级菜单通常会预先填充选项，而二级菜单则留空，等待JavaScript填充。 2. **绑定事件监听器**：使用JavaScript的`...
在本文中，使用了两个 select 元素：一个用于选择省份，另一个用于选择城市。 知识点 6: JavaScript 代码优化 在本文中，使用了 JavaScript 代码优化技术来提高代码的执行效率。例如，在 `addCityToSelect` 函数中...
例如，若想在两个下拉选择框之间互相转移选中的项，我们可以这样做： ```javascript $("#but_one").click(function(){ $("#select1 option:selected").appendTo($("#select2")); }); ``` 这段代码实现了当点击id...
在`select`下拉框中实现搜索功能，一般有两种常见方法：一种是原生HTML和JavaScript的实现，另一种是借助第三方库，如本例中的`jquery.editable-select`。 1. **原生HTML和JavaScript实现**： 使用原生方式需要...
创建两个`<select>`元素，一个用于国家，另一个用于城市。通常，国家的列表可以在页面加载时静态加载，而城市列表则在用户选择国家后通过DWR动态填充。 5. **JavaScript代码**： 使用DWR的API（如`DWRUtil`和`...
以下将详细讨论两种实现ASP.NET向JavaScript传递变量的方法，并探讨它们的适用场景和使用技巧。 **方法1：通过隐藏控件** 这种方法的核心是利用一个隐藏的HTML控件来存储ASP.NET中的变量值。在服务器端，你可以将...
今天，我们将深入探讨如何利用Select2和jQuery-ZTree这两个强大的JavaScript库，构建功能丰富的树形下拉框。这种组件在数据层次结构展示、多级选择等方面有着广泛的应用，如在系统配置、权限管理等场景中。 首先，...
minimumInputLength: 2, // 用户输入至少两个字符后发起请求 ajax: { url: "system/findUsersByCondition", dataType: 'json', data: function (term, page) { return { realName: term // 传递用户的输入...
这个压缩包包含两个文件： 1. 使用须知.txt：该文件可能包含了如何使用这个美化插件的具体步骤、注意事项以及可能遇到的问题和解决方法。通常，这类文档会指导开发者如何引入jQuery库，如何在HTML中正确设置select...
页面上主要包含两个品牌字段：品牌1和品牌2，这两个字段分别通过下拉列表框（`<asp:DropDownList>`）和文本框（`<asp:TextBox>`）实现。品牌2字段允许为空，因此其下拉列表框比品牌1多一个选项。此外，还涉及到了一...