Как получить несколько вариантов выбора без нажатия клавиши управления?

Question

У меня есть 2 'select' в моем html-коде, и из первого выбора я хочу выбрать только один вариант, а из второго select я хочу выбрать несколько вариантов. Я написал код в jquery, чтобы получить несколько вариантов выбора.

JQuery

$('option').mousedown(function(e) {
        e.preventDefault();
        $(this).prop('selected', !$(this).prop('selected'));
        return false;
    });

и этот код работает отлично, но проблема в том, что мой второй выбор работает нормально, но при первом выборе я не могу выбрать ни один вариант, и я просто хочу получить только один вариант из первого выбора.

HTML

        <div class="form-group">
            <div class="col-sm-3">
                <label style="width: 100%;" class="control-label"
                    th:text="#{CLONE.MASTERID}"></label>
            </div>
            <div class="col-sm-9">
                <select class="form-control" id="cloneMasterIds">
                    <option value="">Select Master Device Id</option>
                    <option th:each="master : ${masterIds}" th:value="${master.value}"
                        th:utext="${master.value}">Wireframe</option>
                </select>
                <p class="field-error hidden-true"
                    id="SerialNumber-Error" th:text="#{ERROR.CLONE.MASTERID}"></p>
            </div>
        </div>

        <!-- Child IDs -->
        <div class="form-group">
            <div class="col-sm-3">
                <label style="width: 100%;" class="control-label"
                    th:text="#{CLONE.CHILDID}"></label>
            </div>
            <div class="col-sm-9">

                <select class="form-control select-checkbox" id="cloneChildIds"
                    multiple="multiple">
                    <option th:each="child : ${childIds}" th:value="${child.value}"
                        th:utext="${child.value}">Wireframe</option>
                </select>
                <p class="field-error hidden-true"
                    id="SerialNumber-Error" th:text="#{ERROR.CLONE.CHILDID}"></p>
            </div>
        </div>

Answer 1

Выберите второй оператор select по идентификатору. Обработка событий mousedown и mousemove:

$("#cloneChildIds").mousedown(function(e){
    e.preventDefault();

    var select = this;
    var scroll = select.scrollTop;

    e.target.selected = !e.target.selected;

    setTimeout(() => select.scrollTop = scroll, 0);
    $(select).focus();
}).mousemove(e => e.preventDefault());