Skip to main content

select 穿梭

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery左右穿梭框 - 表单提交解决方案</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            padding: 30px;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            padding: 25px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 15px;
            color: #2c3e50;
            font-weight: 600;
        }
        
        .description {
            text-align: center;
            margin-bottom: 25px;
            color: #7f8c8d;
        }
        
        .form-container {
            margin-bottom: 25px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 8px;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
        }
        
        input[type="text"], input[type="email"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .transfer-box {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .box {
            flex: 1;
            border: 1px solid #e1e4e8;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        
        .box-header {
            background-color: #f8f9fa;
            padding: 12px 15px;
            border-bottom: 1px solid #e1e4e8;
            font-weight: 600;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .count {
            background-color: #3498db;
            color: white;
            border-radius: 12px;
            padding: 2px 10px;
            font-size: 0.8em;
        }
        
        .search-box {
            padding: 10px 15px;
            border-bottom: 1px solid #e1e4e8;
        }
        
        .search-box input {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        .select-container {
            flex: 1;
            overflow: auto;
            height: 250px;
        }
        
        select {
            width: 100%;
            height: 100%;
            border: none;
            padding: 5px;
            font-size: 14px;
            outline: none;
        }
        
        select option {
            padding: 8px 10px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
        }
        
        select option:hover {
            background-color: #f0f7ff;
        }
        
        .buttons {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 15px;
            padding: 0 15px;
        }
        
        button {
            padding: 10px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
            min-width: 100px;
        }
        
        button:hover {
            background-color: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        button:active {
            transform: translateY(0);
        }
        
        button:disabled {
            background-color: #bdc3c7;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .submit-section {
            text-align: center;
            margin-top: 20px;
        }
        
        .submit-btn {
            background-color: #2ecc71;
            padding: 12px 30px;
            font-size: 16px;
        }
        
        .submit-btn:hover {
            background-color: #27ae60;
        }
        
        .result-section {
            margin-top: 25px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 8px;
            display: none;
        }
        
        .result-section h3 {
            margin-bottom: 10px;
            color: #2c3e50;
        }
        
        .footer {
            margin-top: 25px;
            text-align: center;
            color: #7f8c8d;
            font-size: 0.9em;
        }
        
        @media (max-width: 768px) {
            .transfer-box {
                flex-direction: column;
            }
            
            .buttons {
                flex-direction: row;
                justify-content: center;
                margin: 15px 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>jQuery左右穿梭框 - 表单提交解决方案</h1>
        <p class="description">从左侧选择项目并移动到右侧，支持表单提交到服务端</p>
        
        <form id="myForm" action="#" method="POST">
            <div class="form-container">
                <div class="form-group">
                    <label for="username">用户名:</label>
                    <input type="text" id="username" name="username" required>
                </div>
                
                <div class="form-group">
                    <label for="email">邮箱:</label>
                    <input type="email" id="email" name="email" required>
                </div>
                
                <div class="transfer-box">
                    <!-- 左侧选择框 -->
                    <div class="box">
                        <div class="box-header">
                            <span>可选项目</span>
                            <span class="count" id="leftCount">0</span>
                        </div>
                        <div class="search-box">
                            <input type="text" id="leftSearch" placeholder="搜索...">
                        </div>
                        <div class="select-container">
                            <select multiple id="leftSelect" size="10">
                                <option value="1">JavaScript 编程</option>
                                <option value="2">Python 数据分析</option>
                                <option value="3">Java 开发</option>
                                <option value="4">React 前端框架</option>
                                <option value="5">Vue.js 框架</option>
                                <option value="6">Node.js 后端开发</option>
                                <option value="7">数据库设计</option>
                                <option value="8">移动应用开发</option>
                                <option value="9">UI/UX 设计</option>
                                <option value="10">项目管理</option>
                            </select>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="buttons">
                        <button type="button" id="addAll">全部添加 &gt;&gt;</button>
                        <button type="button" id="addSelected">添加选中 &gt;</button>
                        <button type="button" id="removeSelected">&lt; 移除选中</button>
                        <button type="button" id="removeAll">&lt;&lt; 全部移除</button>
                    </div>
                    
                    <!-- 右侧选择框 -->
                    <div class="box">
                        <div class="box-header">
                            <span>已选项目</span>
                            <span class="count" id="rightCount">0</span>
                        </div>
                        <div class="search-box">
                            <input type="text" id="rightSearch" placeholder="搜索...">
                        </div>
                        <div class="select-container">
                            <select multiple id="rightSelect" size="10">
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- 隐藏的表单字段，用于存储已选项目 -->
                <select id="selectedItems" name="selectedItems" multiple style="display: none;"></select>
            </div>
            
            <div class="submit-section">
                <button type="submit" class="submit-btn">提交表单</button>
            </div>
        </form>
        
        <div class="result-section" id="resultSection">
            <h3>表单提交结果（模拟）</h3>
            <p id="resultContent"></p>
        </div>
        
        <div class="footer">
            <p>提示：已选项目会同步到隐藏的表单字段，确保服务端能够正确接收数据</p>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            // 更新计数函数
            function updateCounts() {
                $('#leftCount').text($('#leftSelect option').length);
                $('#rightCount').text($('#rightSelect option').length);
                
                // 同步更新隐藏的表单字段
                updateHiddenField();
            }
            
            // 更新隐藏的表单字段
            function updateHiddenField() {
                // 清空隐藏字段
                $('#selectedItems').empty();
                
                // 将右侧选择框中的所有选项添加到隐藏字段
                $('#rightSelect option').each(function() {
                    $('#selectedItems').append($('<option>', {
                        value: $(this).val(),
                        text: $(this).text(),
                        selected: true
                    }));
                });
                
                // 显示当前已选项目（用于调试）
                console.log("已选项目:", $('#selectedItems').val());
            }
            
            // 初始化计数
            updateCounts();
            
            // 全部添加到右侧
            $('#addAll').click(function() {
                $('#leftSelect option').each(function() {
                    $(this).detach().appendTo('#rightSelect');
                });
                updateCounts();
            });
            
            // 添加选中项到右侧
            $('#addSelected').click(function() {
                $('#leftSelect option:selected').each(function() {
                    $(this).detach().appendTo('#rightSelect');
                });
                updateCounts();
            });
            
            // 从右侧移除选中项
            $('#removeSelected').click(function() {
                $('#rightSelect option:selected').each(function() {
                    $(this).detach().appendTo('#leftSelect');
                });
                updateCounts();
            });
            
            // 全部移除到左侧
            $('#removeAll').click(function() {
                $('#rightSelect option').each(function() {
                    $(this).detach().appendTo('#leftSelect');
                });
                updateCounts();
            });
            
            // 左侧搜索功能
            $('#leftSearch').on('input', function() {
                var filter = $(this).val().toLowerCase();
                $('#leftSelect option').each(function() {
                    var text = $(this).text().toLowerCase();
                    if (text.indexOf(filter) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
            
            // 右侧搜索功能
            $('#rightSearch').on('input', function() {
                var filter = $(this).val().toLowerCase();
                $('#rightSelect option').each(function() {
                    var text = $(this).text().toLowerCase();
                    if (text.indexOf(filter) > -1) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            });
            
            // 双击选项快速移动
            $('#leftSelect').on('dblclick', 'option', function() {
                $(this).detach().appendTo('#rightSelect');
                updateCounts();
            });
            
            $('#rightSelect').on('dblclick', 'option', function() {
                $(this).detach().appendTo('#leftSelect');
                updateCounts();
            });
            
            // 表单提交处理
            $('#myForm').on('submit', function(e) {
                e.preventDefault(); // 阻止表单实际提交，仅用于演示
                
                // 获取表单数据
                var formData = $(this).serialize();
                var formDataArray = $(this).serializeArray();
                
                // 显示提交结果
                $('#resultContent').html(`
                    <strong>用户名:</strong> ${$('#username').val()}<br>
                    <strong>邮箱:</strong> ${$('#email').val()}<br>
                    <strong>已选项目:</strong> ${$('#selectedItems').val().join(', ')}<br><br>
                    <strong>完整的表单数据:</strong><br>${formData}
                `);
                
                $('#resultSection').show();
                
                // 在实际应用中，这里应该是AJAX提交或直接表单提交
                // $.post('your-server-url', formData, function(response) {
                //     // 处理服务器响应
                // });
                
                // 模拟服务器响应
                console.log("表单数据已准备提交:", formData);
                console.log("表单数据数组:", formDataArray);
            });
        });
    </script>
</body>
</html>

No comments to display

Back to top