jquery实现select左右选择之javascript函数无法获取选中的option

最新推荐文章于 2022-11-06 08:13:29 发布
最新推荐文章于 2022-11-06 08:13:29 发布
阅读量175 收藏
点赞数
文章标签： jquery html css js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45303757/article/details/106881843
版权

js函数的空格不能删掉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>sort-4</title>
    <style>
        .assigned{
            border:0;
            background:transparent;
            width:100px;
            height:100px;
            overflow-y:auto;
            vertical-align:bottom;
        }
        .div-select{
            position:absolute;
            border:1px solid #000;
            width: auto;
            height: 15px;
            padding: 0;
            margin: 0;
            font-size:13px;
            display: none;
        }
        .option{
            text-align: center;
        }
        .none-select{
            border: none;
            outline: none;
            width: 100%;
            height: 100%;
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            padding-top:-1px;
            padding-left:1px;
            vertical-align:top;
            background: no-repeat scroll center right transparent;
            font-size: 9px;
            display: none;
        }
    </style>
</head>
<body>
<table border="1px" cellspacing="0">
    <tr>
        <td >
            <select id="unAssigned" class="assigned" multiple size="7">
                <option value="se">SE</option>
                <option value="tl">TL</option>
                <option value="qc">QC</option>
                <option value="pg">PG</option>
                <option value="pg">PG</option>
                <option value="pg">PG</option>
            </select>
        </td>
        <td >
            <button id="left2right"> >>> </button><br>
            <button id="right2left"> <<< </button>
        </td>
        <td style="border:none;">
            <select id="assigned" class="assigned" multiple size="7">
            </select>
        </td>
        <td style="border:none;">
            <table  cellspacing="0" style="width:35px" >
                <tr>
                    <td>
                        <div id="div1" class="div-select" style="top:11px;">
                            <select id="sort1" class="none-select">
                                <option value="asc" class="option">升序</option>
                                <option value="desc" class="option">降序</option>
                            </select>
                        </div>

                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="div2" class="div-select" style="top:28px;">
                            <select id="sort2" class="none-select">
                                <option value="asc" class="option">升序</option>
                                <option value="desc" class="option">降序</option>
                            </select>
                        </div>
                    </td>
                </tr><tr>
                <td>
                    <div id="div3" class="div-select" style="top:45px;">
                        <select id="sort3" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr><tr>
                <td>
                    <div id="div4" class="div-select" style="top:62px;">
                        <select id="sort4" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr><tr>
                <td>
                    <div id="div5" class="div-select" style="top:79px;">
                        <select id="sort5" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr><tr>
                <td>
                    <div id="div6" class="div-select" style="top:96px;">
                        <select id="sort6" class="none-select">
                            <option value="asc">升序</option>
                            <option value="desc">降序</option>
                        </select>
                    </div>
                </td>
            </tr>
            </table>
        </td>
    </tr>
</table>


<script src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#assigned").empty();

        $("#left2right").click(function () {  //列表元素向右移动
            let opts = $("#unAssigned :selected");
            if (opts.length == 0) {
                alert("请选择要分配的角色信息");
            } else {
                $("#assigned").append(opts);

            }
        });

        $("#right2left").click(function () { //列表元素向左移动
            let opts = $("#assigned :selected");//#assigned :selected"中间的空格不能删掉
            //let opts = $("#assigned option:selected");//方式二
            if (opts.length == 0) {
                alert("请选择要撤消的角色信息");
            } else {
                $("#unAssigned").append(opts);
            }
        });
    });
</script>
</body>
</html>
拿什么放在你手心
关注
JavaScript+HTML实现商品的左右选择功能
justinzwd的博客
04-04 1898
功能简介：如下图所示，将“已有商品”中的商品选中移动到右边的“未有商品”，这里可以选中单个选项移动，也可以实现一次性全部移动。同理，右边中的“未有商品”的选项也可以选中然后移动到左边的“已有商品”区域。 在很多示例中都实现了从左往右移的单一功能，这里实现了双向自由移动的功能。 刚开始写双向移动的时候，遇到了一些问题，就是从右向左移动时会出现左边区域和右边区域选项同时被选中的问题，这样就只是两个元...
html实现两个箭头向左向右,原生JS实现左右箭头选择日期实例代码
weixin_39957271的博客
06-23 1186
原生JS实现左右箭头选择日期实例代码2019-01-07编程之家https://www.jb51.cc编程之家收集整理的这篇文章主要介绍了原生JS实现左右箭头选择日期实例代码，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。先上个效果图，就是用左右尖括号可改变中间日期的值。(点击中间显示区域有时间选择器弹框，用的插件就不说了，主要说自己原创的部分) HTML部分 (左右箭头都是用的图片...
jQuery选中select控件 无法设置selected的解决方法
10-28
select 控件的 option用jQuery动态添加，然后选中某项时，IE6不能执行（火狐没问题），用try{}catch(err){alert(err.description);}提示为“无法设置selected属性 未指明的错误”
Jquery mobile为select动态添加option后，无法正常显示的问题
_轻舞菲洋的专栏
08-15 4901
今天用JQM写程序，在为select动态添加option的时候，发现添加option后，无法将option显示出来，在下拉列表中会出现，但是在选择框中默认不会出现。经过在网上的一番寻找，找到了解决办法，那就是将select重新刷新一下。
提交页面获取不到js向DropdownList写的Options的值，如何处理
攀升·Lislie
12-17 4934
        前面所我所写的文章中有关两个DropdownList连动的例子。当我们需要取第二个DropdownList的值时，会碰到取不到的情况：    比如，你页面有一个按钮，点击按钮时，获取它的值：string tmp = BList.SelectedValue; ，这时，你断点到它的下一句，在监视里面看tmp的结果是""。    网上搜索了一下，仅仅找到一个相关的帖子：http:
关于js无法获取到下拉列表select的选中状态解决方案之一
秃头之路
06-12 929
问题 问题当我们在html中适应js对应的下拉列表时，但是我们虽然拿到了select，仍然无法通过我们获取到的select对象获取到对应的option的value和text或者是调用select index方法爆出无定义 解决方案 首先我们先进行检查我们的js代码是不是通过name属性来获取到的select对象 ，如果是则修改获取方式为通过i d来获取，可以解决问题。具体为什么笔者暂时没有 找到答案，就是知道这样可以解决问题。 如果有人知道为什么可以评论区回答，也可以私信我补补充一下，谢谢 ...
ios-HTML图文混排、左右对齐、带选择功能.zip
07-11
根据开源库DTCoreText DTRichTextEditor的代码 写了一个中文左右对齐的图文混排，支持视频播放 适用于做新闻客户端
jQuery获取select选中的option的value值实现方法
10-21
4. 在使用.val()方法获取选中的option的value时，如果select标签没有设置value属性的option被选中了，那么.val()会返回该option的文本内容。为了确保获取的是value属性的值，应确保每个option都有value属性。 5. ...
jQuery实现Select左右复制移动内容
10-21
总的来说，这个jQuery实现的Select左右复制移动内容提供了一个实用的交互方式，帮助用户更方便地管理他们的选择。同时，由于代码结构清晰，易于理解和扩展，因此在实际开发中具有很高的价值。希望这个介绍对你的项目...
JS实现select选中option触发事件操作示例
10-18
总的来说，JavaScript和jQuery提供了解决用户在`<select>`下拉列表中选择`<option>`时触发事件的方法。JavaScript原生方法要求更多的DOM操作，而jQuery提供了更简洁的语法和更强大的功能。理解这两种方式有助于在...
jquery根据一个值来选中select下的option实例代码
10-21
在网页开发中，jQuery 是一个常用的 JavaScript 库，它提供了许多便利的方法来操作 DOM 元素，包括选择、修改和操作 Select 下的 Option 元素。本文将详细讲解如何使用 jQuery 根据一个值来选中 Select 下的 Option...
jquery获取select,option所有的value和text的实例
10-20
本文提到的选择器`$("#UserBoroughoption")`用于选中所有id为`UserBorough`的select元素下的option元素。这种用法中，`#`符号后跟的`UserBorough`是id选择器，表示匹配id属性值为`UserBorough`的元素，之后的空格...
Select左右选择、全选实现
记不住是因为重复的不够多
12-05 215
效果图：  html代码：   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; #m{list-style:none;font:12px} #m li{float:left} #m li div{width:55px;he...
html左右切换功能实现
u013868665的博客
03-28 7475
第一篇博客，因为要实现左右切换的功能，所以自己写了一个小工具，具体功能如下： 使用方法，首先引入changepicker.js和 changepicker.css；需要一个容器div，因为长宽没有做适配处理，所以最小长宽为425*345 （里面用了bootstrap的两个图标class，需要全选时，引入bootstrap.css） 1、默认情况下，直接引入data便可
JavaScript商品的左右选择
mqingo的博客
11-18 326
01.商品的左右选择准备.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;01商品的左右选择准备&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;ta
jquery 中input /checkbox/radio/button/select未选中的值/等取值问题
最新发布
m0_72495985的博客
11-06 555
查找所有input元素： $(":input") 查找所有的担心按钮： $(":radio")$("input:disabled") 查找所有不可用的input元素 ： 中有匹配所有的单行文本框、 查找所有文本框：$(":text") 查找所有的密码：$(":password")注：juquery代码。
html中左右移动选择框,js实现两个select下拉框选项左移右移_咋地 _前端开发者
weixin_36399495的博客
06-03 761
今天没事用Javascript代码/**选中的元素向右移动**/function moveRight(){//得到第一个select对象var selectElement = document.getElementById("first");var optionElements = selectElement.getElementsByTagName("option");var len = opt...
jq实现下拉菜单做左右选择
lnznx的博客
12-03 311
先看看效果 代码： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>431</title> <style type="text/css"> #znx{...
JavaScript案例练习二：下拉列表左右选择
风动云彩
03-13 282
&lt;html&gt; &lt;head&gt;  &lt;title&gt;HTML示例&lt;/title&gt;  &lt;style type="text/css"&gt;  &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="s1" style="float
DWR处理form表单与Select/option：实用JavaScript函数集
在DWR框架中，`util.js`是一个关键的辅助脚本库，它提供了一系列方便的JavaScript函数，帮助开发者在客户端进行数据操作和交互。以下是对各个功能的详细说明： 1. `$()` 函数：这是一个简化的ID选择器，类似于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值