从左到右,从右到左(下拉框jquery)

从左到右,从右到左(下拉框jquery)


表单

<style type="text/css">
        select{
            width:100px;
            height: 80px;
        }
        div{
            float: left;
            width: 130px;
        }
</style>
<div>
        <!--  multiple 下拉框的多选设置      -->
        <select multiple="multiple" name="select1">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
        </select>

        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div>
        <select multiple="multiple" name="select2">
        </select>
        <button>选中添加到左边</button>
        <button>全部添加到左边</button>
    </div>

效果图
在这里插入图片描述

选中添加到右边

<script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //eq属性取第几个,从0开始计算
            $("button:eq(0)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] :selected").each(function(){
                    //把选中的属性添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });
        });
    </script>

全部添加到右边

//eq  第2个button
            $("button:eq(1)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] option").each(function(){
                    //把全部添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });

整体代码

	<style type="text/css">
        select{
            width:100px;
            height: 80px;
        }
        div{
            float: left;
            width: 130px;
        }
    </style>
    <script type="text/javascript" src="jquery/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        $(function () {
            //eq属性取button的第几个,从0开始计算   第1个button
            $("button:eq(0)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] :selected").each(function(){
                    //把选中的属性添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });
            //eq  第2个button
            $("button:eq(1)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select1] option").each(function(){
                    //把全部添加到select2下拉框中
                    $(this).appendTo("select[name=select2]");
                });
            });
            //eq  第3个button
            $("button:eq(2)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select2] :selected").each(function(){
                    //把选中的属性添加到select2下拉框中
                    $(this).appendTo("select[name=select1]");
                });
            });

            //eq  第4个button
            $("button:eq(3)").click(function () {
                //对select1下拉框  选中的属性进行操作
                $("select[name=select2] option").each(function(){
                    //把全部添加到select2下拉框中
                    $(this).appendTo("select[name=select1]");
                });
            });
        });
    </script>


    <div>
        <!--  multiple 下拉框的多选设置      -->
        <select multiple="multiple" name="select1">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
        </select>

        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div>
        <select multiple="multiple" name="select2">
        </select>
        <button>选中添加到左边</button>
        <button>全部添加到左边</button>
    </div>

整理:
尚硅谷

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
下面是一个简单的实现示例: ``` <template> <div class="form-group"> <label>{{ label }}</label> <div class="form-control"> <select v-model="selectedItem" @change="validateInput"> <option value="">请选择</option> <option v-for="item in options" :key="item.value" :value="item.value">{{ item.label }}</option> </select> <input v-model="inputValue" @input="validateInput" /> <div class="error-message">{{ errorMessage }}</div> </div> </div> </template> <script> export default { props: { label: { type: String, required: true }, options: { type: Array, required: true }, validate: { type: Function, required: true } }, data() { return { selectedItem: '', inputValue: '', errorMessage: '' } }, methods: { validateInput() { const isValid = this.validate(this.selectedItem, this.inputValue) this.errorMessage = isValid ? '' : '输入格式不正确' } } } </script> <style> .form-group { margin-bottom: 20px; } .form-control { display: flex; align-items: center; } .form-control select { margin-right: 5px; } .error-message { color: red; font-size: 12px; margin-top: 5px; } </style> ``` 在父组件中,你可以这样使用它: ``` <template> <div> <InputWithSelect label="姓名" :options="nameOptions" :validate="validateName" /> </div> </template> <script> import InputWithSelect from './InputWithSelect.vue' export default { components: { InputWithSelect }, data() { return { nameOptions: [ { label: '张三', value: 'zhangsan' }, { label: '李四', value: 'lisi' }, { label: '王五', value: 'wangwu' } ] } }, methods: { validateName(selectedItem, inputValue) { return /^[a-zA-Z]+$/.test(inputValue) } } } </script> ``` 如上代码所示,你需要传递一个选项数组、一个验证函数以及一个标签字符串给 `InputWithSelect` 组件。选项数组包含下拉框中的选项,验证函数接收两个参数(下拉框中的选项和输入框中的值),并返回一个布尔值表示是否通过验证。在子组件中,我们可以通过 `v-model` 指令来双向绑定下拉框和输入框的值,并在 `validateInput` 方法中调用验证函数,更新错误信息。最后,我们在模板中显示错误信息。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值