php/javascript 在多个列表框中没有重复数据答案

【问题标题】：php/javascript no duplicate data in multiple list boxesphp/javascript 在多个列表框中没有重复数据
【发布时间】：2017-05-19 07:18:58
【问题描述】：

我想知道是否可以在 php/javascript 中防止多个选择框中的重复数据。我有 6 个选择框，用户可以在其中选择 1 到 36 之间的数字。

我真正想要的是，当用户在第一个选择框中选择任何数字（例如 12）时，该数字 12 不会出现在第二个选择框中。我在互联网上搜索了所有线索。

【问题讨论】：

粘贴有问题的 html。
goodday ，这是很有可能的，但我建议不要隐藏你在之前选择中选择的内容，你可以禁用它，这样它就不会被选中

标签： php jquery

【解决方案1】：

您可以检查这些功能的工作原理并制定自己的解决方案：

将事件处理程序绑定到“更改”JavaScript 事件，或触发该事件 -> jQuery .change()
获取匹配元素集中第一个元素的属性值 -> jQuery .prop()

这种方式与其他答案略有不同，因为一个删除选项，另一个禁用它。

jQuery 部分（不要忘记在页面头部添加 jQuery）

$(document).ready(function() {
    $(".connSelect").change(function() {

        var selVAL = $(this).val(); // will handle the value of selected item

        $("select option:selected" ).each(function() { // when value is selected
            $("option[value=" + selVAL + "]").prop('disabled', true); // disable on other 'select'
        });
    });
});

HTML 部分

<select name="select-1" id="select-1" class="connSelect">
    <option value="">-- pick one --</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>

<select name="select-2" id="select-2" class="connSelect">
    <option value="">-- pick one --</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>

<select name="select-3" id="select-3" class="connSelect">
    <option value="">-- pick one --</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>

这是一个FIDDLE，看看它是如何工作的

注意：这只是一个示例，它不会对值执行任何验证，也不会在禁用时再次启用值

【讨论】：