同名的多选表单标签始终获得最后一个选项答案

【问题标题】：Multiple select form tag for the same name getting the last option always同名的多选表单标签始终获得最后一个选项
【发布时间】：2020-09-20 21:09:00
【问题描述】：

我一直在尝试根据其位置选择表号。我的表单正在工作并且记录已添加到数据库中，但是在数字部分，无论我选择什么，插入的数字都是“32”，即使我在选择“tnum3”中选择了不同的数字。我不知道发生了什么。

表格

<label for="tnum">table number
                        <select type="number" id="tnum1" name="num">
                            <?php for ($i = 2; $i <= 9; $i++) : ?>
                                <option id="in" value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php endfor; ?></select>
                        <select type="number" id="tnum2" name="num" style="display: none;">
                                <?php for ($i = 12; $i <= 23; $i++) : ?>
                                <option id="out" value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php endfor; ?></select>
                        <select type="number" id="tnum3" name="num" style="display: none;">
                                <?php for ($i = 32; $i <= 35; $i++) : ?>
                                <option id="tr" value="<?php echo $i; ?>"><?php echo $i; ?></option>
                            <?php endfor; ?>
                        </select></label><br>

                    <label for="loc">location
                        <select id="loc" name="location"  style="width:100%;" onchange="change_tnum(this.value)" required>
                            <option value="inside" >inside</option>
                            <option value="outside" >outside</option>
                            <option value="Porch" >Porch</option>
                    </select></label><br>

这是一个 JS 函数，它只是根据我选择的位置切换选择标签：

function change_tnum(x){

    $('#tnum1').hide();
    $('#tnum2').hide();
    $('#tnum3').hide();// hide any options already shown
    switch (x) { // show whichever option is appropriate
      case 'inside':
        $('#tnum1').show();
        inside();
        break;
      case 'outside':
        $('#tnum2').show();
        outside();
        break;
      case 'porch':
        $('#tnum3').show();
        terrace();
        break;
      default:
        break;
    }
}

【问题讨论】：

这有点令人困惑。您的函数仅附加到最后一个选择，其中 valyes 位于外部或门廊内部。也仅仅因为一个选择被隐藏并不意味着它的值没有被选中。

标签： javascript database forms codeigniter

【解决方案1】：

我认为您的选择没有任何问题，但是即使您将元素设置为display: none，它的值仍然会被提交。由于有多个同名元素，最后一个值会覆盖之前的值。
如果你只想要一个元素值，那么你应该给它添加disabled 属性。标记为disabled 的元素不会发送到服务器。 Reference

因此，您的代码更改为 -

function change_tnum(x){

    $('#tnum1').hide();
    $('#tnum1').attr('disabled', true);

    $('#tnum2').hide();
    $('#tnum2').attr('disabled', true);

    $('#tnum3').hide();// hide any options already shown
    $('#tnum3').attr('disabled', true);

    switch (x) { // show whichever option is appropriate

        case 'inside':
            $('#tnum1').show();
            $('#tnum1').attr('disabled', false); // or simply remove disabled attribute
            inside();
            break;

        case 'outside':
            $('#tnum2').show();
            $('#tnum2').attr('disabled', false);
            outside();
            break;

        case 'porch':
            $('#tnum3').show();
            $('#tnum3').attr('disabled', false);
            terrace();
            break;

        default:
            // do something
    }
}

希望对你有帮助。

【讨论】：

乐于助人。 :)