优化表单提交：使用原生Select元素处理非键盘输入

<form id="dataForm">
    <label for="numberSelection">选择一个数字:</label>
    <select id="numberSelection" name="selectedNumber">
        <option value="">请选择</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <button type="submit">提交表单</button>
</form>

$(document).ready(function() {
    // 监听 select 元素的值变化
    $('#numberSelection').on('change', function() {
        var selectedValue = $(this).val();
        console.log('用户选择了:', selectedValue);
        // 如果需要，可以在这里进行一些UI更新或数据预处理
    });

    // 监听表单提交事件（使用AJAX）
    $('#dataForm').on('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为（页面刷新）

        var selectedNumber = $('#numberSelection').val();

        if (!selectedNumber) {
            alert('请选择一个数字！');
            return;
        }

        console.log('准备提交的数字:', selectedNumber);

        // 模拟AJAX提交
        $.ajax({
            url: '/api/submit-data', // 替换为您的后端API地址
            method: 'POST',
            data: { number: selectedNumber }, // 将选中的值作为数据发送
            success: function(response) {
                console.log('数据提交成功:', response);
                alert('提交成功！');
                // 根据后端响应更新UI
            },
            error: function(xhr, status, error) {
                console.error('数据提交失败:', error);
                alert('提交失败，请重试。');
            }
        });
    });
});

<form id="customDataForm">
    <!-- 隐藏的输入框，用于存储选定的值并提交 -->
    <input type="hidden" id="hiddenSelectedNumber" name="customSelectedNumber" value="">

    <p>请从以下列表中选择一个数字:</p>
    <ul id="customNumberList" style="list-style: none; padding: 0;">
        <li data-value="1" style="cursor: pointer; padding: 5px; border: 1px solid #ccc; margin-bottom: 5px;">1</li>
        <li data-value="2" style="cursor: pointer; padding: 5px; border: 1px solid #ccc; margin-bottom: 5px;">2</li>
        <li data-value="3" style="cursor: pointer; padding: 5px; border: 1px solid #ccc; margin-bottom: 5px;">3</li>
        <!-- 更多列表项 -->
    </ul>
    <button type="submit">提交自定义表单</button>
</form>

$(document).ready(function() {
    // 监听自定义列表项的点击事件
    $('#customNumberList li').on('click', function() {
        // 获取点击的列表项的数据值
        var selectedValue = $(this).data('value');

        // 将值设置到隐藏的输入框中
        $('#hiddenSelectedNumber').val(selectedValue);

        // 可选：为选中的列表项添加视觉反馈
        $('#customNumberList li').removeClass('selected-item');
        $(this).addClass('selected-item');

        console.log('自定义列表选中值:', selectedValue);
    });

    // 监听自定义表单提交事件（使用AJAX）
    $('#customDataForm').on('submit', function(event) {
        event.preventDefault(); // 阻止表单默认提交行为

        var submittedNumber = $('#hiddenSelectedNumber').val();

        if (!submittedNumber) {
            alert('请选择一个数字！');
            return;
        }

        console.log('准备提交的自定义数字:', submittedNumber);

        // 模拟AJAX提交
        $.ajax({
            url: '/api/submit-custom-data', // 替换为您的后端API地址
            method: 'POST',
            data: { customNumber: submittedNumber }, // 将隐藏输入框的值作为数据发送
            success: function(response) {
                console.log('自定义数据提交成功:', response);
                alert('自定义表单提交成功！');
            },
            error: function(xhr, status, error) {
                console.error('自定义数据提交失败:', error);
                alert('自定义表单提交失败，请重试。');
            }
        });
    });
});

.selected-item {
    background-color: #e0f7fa; /* 浅蓝色背景 */
    border-color: #00bcd4 !important; /* 青色边框 */
    font-weight: bold;
}