Как выбрать вариант, который был добавлен к выбору

Question

Я написал небольшую функцию для установки опций для выбора, который я передаю в функцию с тремя опциями в зависимости от второго параметра функции. Я использую JQuery. Я не могу заставить выбранную опцию работать вообще. Если есть только одна переменная (иначе, «X»), то я хочу выбрать ее, так как это единственная опция. Я пробовал несколько вещей, включая дополнительные аргументы объекта Option. По какой-то причине это не работает.

function setAxisSelect(select, numVariableTransitions) {
    $(select).find('option').remove();
    if (numVariableTransitions >= 2)
        $(select).append(new Option('', ''));
    if (numVariableTransitions >= 1) 
        $(select).append(new Option('X', 'x'));
    if (numVariableTransitions >= 2)
        $(select).append(new Option('Y', 'y'));
    if (numVariableTransitions >= 3)
        $(select).append(new Option('Z', 'z'));

    if (numVariableTransitions === 1)
        $(select).children("option[value='x']").prop('selected', true); // THis is not working

    if (numVariableTransitions === 1)
        $(select).val('x'); // This also doesn't work, LOL
}

Я пробовал $ (выбрать) .find ('опция'), и я пробовал .attr и .prop оба. Я знаю .prop лучше.

Это тоже не работает. Здесь что-то странное происходит не так.

function setAxisSelect(select, numVariableTransitions) {
    $(select).find('option').remove();
    if (numVariableTransitions >= 2)
        $(select).append(new Option('', '', false, false));
    if (numVariableTransitions === 1) 
        $(select).append(new Option('X', 'x', true, true));
    else if (numVariableTransitions >= 1)
        $(select).append(new Option('X', 'x', false, false));
    if (numVariableTransitions >= 2)
        $(select).append(new Option('Y', 'y', false, false));
    if (numVariableTransitions >= 3)
        $(select).append(new Option('Z', 'z', false, false));
}

Код вызова выглядит следующим образом:

_.forEach(variants, function (val, idx) {
     //some other not related stuff...
    setAxisSelect($('#variantAxis' + (idx + 1)), variants.length);
});

========= ОБНОВЛЕНИЕ ========== Просмотр исходной панелиЯ вижу, что JQuery добавляется в выбранное свойство в опции X, как я хочу. Таким образом, он работает в коде, но фактический интерфейс не отражает этого. Вот скриншот этого. Вы можете видеть, что опция X выбрана, но не отображается на панели браузера.

Answer 1

Третий параметр из метода Option() - defaultSelected, а четвертый - selected, вы можете достичь этого, выполнив это. Но проблема здесь в вашей реализации заключается в том, что вы можете параметризовать, какая опция выбирается при рендеринге. Вам нужно изменить функцию, если вы хотите, чтобы в этом случае по умолчанию была выбрана опция x.

function setAxisSelect(select, numVariableTransitions) {
    $(select).find('option').remove();
    if (numVariableTransitions >= 2)
        $(select).append(new Option('', '', false, false));
    if (numVariableTransitions >= 1) 
        $(select).append(new Option('X', 'x', false, false));
    if (numVariableTransitions >= 2)
        $(select).append(new Option('Y', 'y', true, true));
    if (numVariableTransitions >= 3)
        $(select).append(new Option('Z', 'z', false, false));
}
setAxisSelect('.mySelect', 4)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="mySelect">
  <option>initial</option>
</select>