Question

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

以获取更好的参考：Selecting multiple from an html select element without using ctrl key

在以下问题中，我得到了最好的解决方案。但是问题是我需要一个兼有 1.不按住Ctrl键 2.将选择选项限制为少于3

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

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的方式进行多个选择。您不需要合并任何东西。

没有ctrl的HTML多选选项

1 个答案: