两个select multiple 多选 全选 取值 增加 删除 问题

最新推荐文章于 2021-11-15 09:53:58 发布
转载 最新推荐文章于 2021-11-15 09:53:58 发布 · 4.4k 阅读 · 0
文章标签：

#button #input #function #javascript #html #border

本文提供了一个HTML页面示例，展示了如何使用下拉菜单进行排序选项的选择，并提供了按钮用于移动选项以及调整已选选项的优先级。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>选择下拉菜单--http://www.yongfa365.com/item/686ba37800f67121.html</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Description" CONTENT="Power by 51windows.Net">
</HEAD>
<BODY>
<form method="post" name="myform">
<table border="1" width="400">
<tr>
<td><CENTER>
可选择排序方式
</CENTER></td>
<td></td>
<td><CENTER>
已选择排序方式
</CENTER></td>
</tr>
<tr>
<td width="40%"><select style="width:100%;" multiple name="left" size="8"
ondblclick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<option value="20">按编入时间(晚到早)</option>
<option value="30">按编入时间(早到晚)</option>
<option value="40">按点击率(升序)</option>
<option value="50">按点击率(降序)</option>
<option value="60">按资产名称(升序)</option>
<option value="70">按资产名称(升序)</option>
</select>
</td>
<td width="20%" align="center"><input type="button" value=" >>>> " onClick="moveOption(document.getElementById('left'), document.getElementById('right'))">
<br>
<br>
<input type="button" value=" <<<< " onClick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</td>
<td width="40%"><select style="width:100%;" multiple name="right" size="8"
ondblclick="moveOption(document.getElementById('right'), document.getElementById('left'))">
</select>
</td>
</tr>
<tr>
<td colspan="3"><CENTER>
<INPUT TYPE="button" value="优先级上升" onClick="changepos(right,-1)">
<INPUT TYPE="button" value="优先级下降" onClick="changepos(right,1)">
<INPUT TYPE="button" value="优先级置顶" onClick="gototop(right)">
</CENTER></td>
</tr>
</table>
值：
<input type="text" name="result" id="result" size="40" value="" />
</form>
<script language="JavaScript">
<!--
function moveOption(e1, e2){
for(var i=0;i<e1.options.length;i++){
if(e1.options[i].selected){
var e = e1.options[i];
e2.options.add(new Option(e.text, e.value));
e1.remove(i);
i=i-1
}
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
function getvalue(geto){
//var allvalue = "";
//for(var i=0;i<geto.options.length;i++){
// allvalue +=geto.options[i].value + ",";
//}
var resultArray = new Array();
for(var i=0;i<geto.options.length;i++){
resultArray.push(geto.options[i].value);
}
return resultArray.join();
}
function changepos(obj,index){
if(index==-1){
if(obj.selectedIndex !=-1){
if (obj.selectedIndex>0){
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex-1));
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}else{
alert("请至少选择一个已选择排序方式");
}
}else if(index==1){
if(obj.selectedIndex !=-1){
if (obj.selectedIndex<obj.options.length-1) {
obj.options(obj.selectedIndex).swapNode(obj.options(obj.selectedIndex+1));
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}else{
alert("请至少选择一个已选择排序方式");
}
}
}
function gototop(obj){
if(obj.multiple){
if(obj.selectedIndex !=-1){
for(var selIndex=0; selIndex<obj.options.length; selIndex++){
if(obj.options[selIndex].selected){
var transferIndex = selIndex;
while(transferIndex > 0 && !obj.options[transferIndex - 1].selected){
obj.options[transferIndex].swapNode(obj.options[transferIndex - 1]);
transferIndex --;
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}
}
}else{
alert("请至少选择一个已选择排序方式");
}
}else{
if(obj.selectedIndex !=-1){
var selIndex = obj.selectedIndex;
while(selIndex > 0){
obj.options[selIndex].swapNode(obj.options[selIndex - 1]);
selIndex --;
}
document.getElementById('result').value=getvalue(document.getElementById('right'));
}else{
alert("请至少选择一个已选择排序方式");
}
}
}
//-->
</script>
</BODY>
</HTML>
转自：http://www.yongfa365.com/Item/686ba37800f67121.html

antd-react 组件库工作以来的总结
weixin_44457030的博客
11-13 1554
antd-react 组件库工作以来的总结
HTML+CSS交互 (3)
delphiwcdj的专栏
02-23 1276
本文紧接 HTML+CSS标签 (2)，继续学习交互的方法。
js multiple全选与取消全选实现代码
10-27
本文章总结了利用jquery与js实现multiple全选与取消全选代码有需要参考的朋友可参考下
两个select multiple多选全选值增加除题
iteye_10197的博客
05-02 224
选择下拉菜单--http://www.yongfa365.com/item/686ba37800f67121.html 可选择排序方式 已选择排序方式 ...
select实现多选、全选、全不选
热门推荐
cat_pp的博客
03-08 5万+
今天使用select下拉框实现了全选，全不选和多选的功能，效果如图： 1、html代码：为select标签设置multiple属性为true <select id="myselect" multiple="true"> <option value="1">java</option> <option value="2">javaSE</option> <option va
jquery.multiselect多选下拉框实现代码
10-21
在Web开发中，多选下拉框是一种常见的用户界面元素，用于让用户从多个选项中选择一个或多个。jQuery库提供了一种简便的方式来扩展HTML的select元素功能，使其支持多选功能，并且更加易于操作。jquery.multiselect...
php程序员面试题（含html、JavaScript、php和mysql）
03-19
- 下拉菜单的多选选项通过 `<select multiple>` 实现。 #### JSON使用 **问题：**有没有用过JSON？数据结构？ **解析：**JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时...
四、数据展示组件(2)
rocktanga的博客
11-15 1672
12、Tree树形控件 多层次的结构列表。 何时使用：文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用 树控件 可以完整展现其中的层级关系，并具有展开收起选择等交互功能。 (0)<Tree>组件对应的事件 <1>onCheck事件: 表示选中复选框，或者取消复选框的选中时触发.可选值：无；默认值： -；类型： function(checkedKeys, info:{checked: boolean, checkedNodes, node
html多选下拉框 ，CheckBox的Select组件 可多选的下拉框
04-09
html多选下拉框 ，CheckBox的Select组件。可多选的下拉框。
Js操作Select大全(取值、设置选中等等)
05-14
Js操作Select大全(取值、设置选中等等) Js操作Select大全(取值、设置选中等等)
重构《实现select multiple左右添加和删除功能》
解惑的过程就是成长的过程
07-08 133
很久很久以前，我刚听说过JQuery，然后在不知道javaeye还是blogjava上看到一篇《实现select multiple左右添加和删除功能》的文章，写的很黄很暴力，我一紧张就打印下来了，昨天晚上拉肚子上厕所，突然找出打印稿，在厕所上看了一下，发现不错。这个文章的原作者我已经不知道是谁了，但是我要感谢他的奉献精神。   为了表示对他的尊敬，我修改了他的代码，为了更通用。代码例子任然沿用...
<select> 标签的 multiple 属性规定可同时选择多个选项。
gtlishujie的博客
08-19 1万+
1.使用multiple属性可以实现多选 multiple="multiple" size="2"> Volvo Saab Opel Audi 2.     pageEncoding="GBK"%>                                报表定制          .tabstyle table tr td {     b
checkBoxh或者multiple的全选代碼總結
wensonlee的专栏
08-11 210
有很多人不知道在多选框或者multiple中全选怎么编写代码。最近做一個項目學習總結了一下—— //代码说明(lulu163.com)：form1为表单名，memberId为复选框，selectbutton为全选按钮 function selectAll() { for (var i=0;i...
多项选择框的移入 移出 <select multiple="multiple">
beyondsanli的专栏
06-06 396
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;META NAME="Generator" CONTENT="EditPlus&q
下拉多选框multiple-select——2021-03-30
weixin_44977914的博客
03-30 1504
下拉多选框插件multiple-select 取值回显 multiple-select插件网站：http://multiple-select.wenzhixin.net.cn/index.html?locale=zh_CN 用法： 1、动态添加选项 var data = []; $.each(regionData, function (index, value) { $.each(value, function (k, v) { var item = {
vue select实现多选全选
07-15
要实现Vue Select的多选全选功能，你可以使用以下步骤： 1. 在Vue组件中，使用`v-model`指令将选择的值绑定到一个数据属性上，例如`selectedOptions`。 2. 添加一个全选的复选框，用于选择或取消选择所有选项。你可以使用一个单独的数据属性，例如`selectAll`，来保存全选复选框的状态。 3. 在Vue的模板中，为每个选项添加一个复选框，并将其选择状态与对应的选项绑定。使用`v-model`指令将选中状态绑定到一个临时的`isChecked`属性上。 4. 监听全选复选框的变化，当全选复选框的状态改变时，更新每个选项的选择状态。 下面是一个示例代码： ```html <template> <div> <input type="checkbox" v-model="selectAll" @change="selectAllOptions"> <label for="select-all">全选</label> <select multiple v-model="selectedOptions"> <option v-for="option in options" :value="option.value" :key="option.value"> <input type="checkbox" :value="option.value" v-model="option.isChecked"> {{ option.label }} </option> </select> </div> </template> <script> export default { data() { return { options: [ { label: '选项1', value: 'option1', isChecked: false }, { label: '选项2', value: 'option2', isChecked: false }, { label: '选项3', value: 'option3', isChecked: false }, // 添加更多选项... ], selectedOptions: [], selectAll: false, }; }, methods: { selectAllOptions() { this.options.forEach((option) => { option.isChecked = this.selectAll; }); if (this.selectAll) { this.selectedOptions = this.options.map((option) => option.value); } else { this.selectedOptions = []; } }, }, }; </script> ``` 在上面的示例中，我们使用了一个`options`数组来存储所有的选项。每个选项都有一个`isChecked`属性来表示其选择状态。当全选复选框改变时，我们遍历所有选项并更新它们的选择状态。同时，我们根据选择状态更新`selectedOptions`数组，以便在多选框中显示被选择的选项。 希望这能帮助到你实现Vue Select的多选全选功能！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值