[封装插件]实现多个下拉菜单select中的option移动操作

最新推荐文章于 2022-03-24 18:47:36 发布
最新推荐文章于 2022-03-24 18:47:36 发布
阅读量729 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Byte_Dance/article/details/79298156
版权

使用JS的写法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #form1{
            width: 80px;
            height: 150px;
            display:inline;
        }
        #form2{
            width: 80px;
            height: 150px;
            display:inline;
        }
        #select1 {
            width: 80px;
            height: 150px;
        }

        #select2{
            width: 80px;
            height: 150px;
        }
    </style>
</head>
<body>
<form action="" id="form1">
    <select name="" id="select1" size="7" multiple="multiple">
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
最低0.47元/天 解锁文章
Byte_Dance
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js 多选框里的元素拖动排序
lixiwoaini的博客
05-16 1645
一、需求背景： 项目要求在多选的情况下对已选择的值进行手动拖动排序 二、设计分析： 我们正常的js插件中没有此功能，需要拖动里面的元素，就需要添加在生成的已选择的li元素里添加h5属性（draggable="true"），这样我们才能有拖动元素的这个效果。然后我们在select初始化的页面再监听拖动事件。除了核心的拖动外，我们还需要...
下拉框封装
legends2012的专栏
10-14 856
封装一个下拉框（原创） 封装的原因肯定是各种变态需求 上图，左边是下拉框，右边是封装的控件 如何修改黑点背景色，那只能封装一个控件了 分三步解决这个问题，写HTML/CSS/JS 步骤分解： 1、布局好你想呈现的效果，JS控制它什么时候显示隐藏 2、隐藏好下拉框，用布局好的标签显示于当前下拉框的位置上 3、点击选中项则改变下拉框的值 index.html
JS实现Select的option上下移动的方法
万彬学习的博客
12-25 1293
这篇文章主要介绍了JS实现Select的option上下移动的方法,涉及JavaScript动态操作页面元素的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现Select的option上下移动的方法。分享给大家供大家参考，具体如下： function UpOrDown(direct, selectId) {//direct : 1:U
jQuery实现下拉列表之间选项option移动
weixin_48747169的博客
03-24 1382
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>Title</title> <script type="text/javascript" src="JS/jquery-3.6.0.min.js"></script> &lt
element拖拽的select下拉框
晚星的博客
06-09 1409
封装组件 <template> <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners"> <slot /> </el-select> </template> <script> import Sortable from 'sortablejs' expor
AngularJS service之select下拉菜单效果
10-19
本文将重点讨论如何利用AngularJS服务在HTML模板中实现select下拉菜单的效果。 首先，`ng-options`指令是AngularJS提供的一种方便的方式来动态生成下拉列表，它可以从一个数组或对象中生成选项。例如，在以下代码中...
封装html的select标签的js操作实例
12-09
这个实例提供的是一系列封装好的函数，用于简化对`select`标签的操作。 1. `BindSelect`函数： 这个函数的主要目的是将数据源（`dataList`）中的数据绑定到指定ID的`select`元素上。`fieldtext`参数用于指定数据...
bootstrap select插件封装成Vue2.0组件
12-02
在Vue.js 2.0框架中，为了更好地集成此插件并利用Vue的组件化特性，我们可以将Bootstrap Select封装为一个自定义组件。以下是对封装过程的详细说明： 首先，我们需要在HTML模板中创建一个新的Vue组件，例如`<my-...
select 分组下拉菜单自定义样式
06-07
在网页设计中，`select`元素常常用于创建下拉菜单，提供用户选择的选项。然而，浏览器默认的`select`样式通常较为简单，不能满足所有设计需求。本话题将深入探讨如何自定义`select`分组下拉菜单的样式，以实现更美观...
jQuery实现动态加载select下拉列表项功能示例
12-09
在本文中，我们将探讨如何使用jQuery来实现动态加载select下拉列表项的功能。这是一个非常实用的技术，特别是在网页应用中，当需要根据用户的选择或者特定条件动态更新下拉选项时。 **需求说明：** 传统的select...
(精华)2020年7月17日 vue 实现element-ui的select可拖拽
热门推荐
时光隧道
07-17 56万+
<template> <el-select ref="dragSelect" v-model="selectVal" v-bind="$attrs" class="drag-select" multiple v-on="$listeners"> <slot /> </el-select> </template> <script> import Sortable from 'sortablejs' export def
实现option上下移动_js控制select 中option项的上下移动
weixin_36480510的博客
02-12 109
①select.options("id")方法取出一个option②证明option的索引不能通过option.index来更改其索引值③通过option的swapNode方法来交换索引④选取一个Item通过select的selectIndex来选中一个option如果该Item有id,可以通过id值来选取该Item: options("hong")01234function setOrder(f...
一个在Select 中拖动的例子
xiexy的专栏
10-22 1284
选项一选项二选项三选项四选项五选项六选项七向上向下var curOption=new Option();function up(obj){if(obj.selectedIndex!=-1) {var obj1=obj.options(obj.selectedIndex);if (obj.selectedIndex>0)obj1.swapNode(obj1.previousSibling);
js 控制 select option选项上下移动 jackey
qsfwy的专栏
08-28 177
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;排序&lt;/title&gt;&lt;script&gt;var x=null;var listObj=null;//鼠标按下不放时的操作function setTimeStart(t
实现option上下移动_javascript实现select中option的顺序上下移动
weixin_39523280的博客
02-12 162
function sortUp(obj)//向上移动{var targetOptions=document.getElementById(obj);//提取操作的对象集合，也就是需要操作的selectif(targetOptions!=undefined){var length=targetOptions.options.length;if(length>0){for(index=0;ind...
Input实现下拉框多选
payton321的博客
06-23 6110
" id="col" class="cInp" style="width: 80px"/> ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ css样式： .mdiv{  margin-bottom:10px;  /* position:relative; */ } .div1{  width:80px;  padding-top:0px;  
Dselector,可以选择多个选项的下拉表单插件！简单易用，小白最佳选择！解决option长度问题
weixin_43099985的博客
12-29 2917
效果图如上！插件地址：https：//github.com/iIASDAFDF/Dselector 演示网址：https：//iiasdafdf.github.io/Dselector/ 一个简单易用的下拉表单，可选择多个选项，解决option过长问题！ 这是1.3版本 目前只有两种选择框形式 一个页面可以使用多个选择框！您只需要新建实例对象即可 1.使用方法： 1.1定义...
select2拖动元素
l18971631713的博客
12-18 811
select2 拖动已选择元素
vue3封装一个Select下拉选择器组件
最新发布
01-30
当你想要封装一个 Vue3 下拉选择器组件时，你需要遵循以下步骤: 1. 创建一个 Vue 组件的模板，其中包含一个下拉菜单和若干个选项。 2. 在组件的 data 中声明一个变量，用来存储当前选中的值。 3. 在组件的 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值