没有 ctrl 的 HTML 多选选项有限

Question

我发现了大量与我的问题相关的问题。实际上，我有“不按住Ctrl键选择选项”的解决方案。

为了更好的参考：Selecting multiple from an html select element without using ctrl key

我在以下问题中得到了最佳解决方案。但问题是我需要一个兼具两者的功能 1.不按住Ctrl键 2.限制选择选项小于3

这里是不使用 ctrl 键的 HTML 选择元素的代码

window.onmousedown = function (e) {
    var el = e.target;
    if (el.tagName.toLowerCase() == 'option' && el.parentNode.hasAttribute('multiple')) {
        e.preventDefault();

        // toggle selection
        if (el.hasAttribute('selected')) el.removeAttribute('selected');
        else el.setAttribute('selected', '');

        // hack to correct buggy behavior
        var select = el.parentNode.cloneNode(true);
        el.parentNode.parentNode.replaceChild(select, el.parentNode);
    }
}

select{
  width: 200px;
  height: 200px;
}

<select multiple>
    <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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

这里的代码限制了按住 ctrl 按钮的选项：

$("select").on('change', function(e) {
    if (Object.keys($(this).val()).length > 3) {
        $('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false);
    }
});

select{
  width: 200px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select multiple>
    <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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
</select>

但我不能同时制作这两个脚本。我试过了，但只有“不持有 ctrl”的脚本才能工作。

注意：我在 jquery 中找到了其他脚本，可以在多选选项中激活“不按住 ctrl”。但是他们没有正确发送数据。上面的纯JS对我来说是完美的:)

谢谢

Answer 1

您的第一个脚本允许通过在不使用和使用 CTRL 的情况下单击来进行多项选择。你不需要组合任何东西。