Выберите неработающие динамически созданные элементы выбора. Всегда выбирать последнюю опцию.

Question

У меня есть код ниже, где я создаю динамические элементы выбора. Элемент управления отображается в браузере без проблем. Однако выбранная опция не является той, которая выбрана на экране. На экране всегда отображается последний элемент.

Что странно, если I View Source, свойство «select» находится на выбранном вами параметре. Тем не менее, отображается последний параметр.

Я пробовал использовать .attr («selected», value === selectOption.SelectedValue)), и это даже не добавляет свойство «selected» в элемент option.

Единственное, что работает, это выбрать значение после того, как элемент «Элемент» был добавлен в мой тег div (commonSubjectivesWindow). Но это кажется мне взломанным.

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

function createSelectElement(commonSubjective, selectOption) { 

     var name = "select" + commonSubjective.Id; 
     var selectElement = $("<select>").attr("name", name); 

     //Tried, does not work 
     //$.each(selectOption.Options, function (key, value) { 
     // selectElement.append($("<option>").val(value).text(value).prop("selected", value === selectOption.SelectedValue)); 
     //}); 

     $.each(selectOption.Options, function (key, value) { 
      selectElement.append($("<option>").val(value).text(value).attr("selected", value === selectOption.SelectedValue)); 
     }); 

     return selectElement; 
    } 

    function formatCommonSubjectiveText(commonSubjective) { 

     if (commonSubjective.SelectOptions.length > 0) { 

      var i = 0; 
      $.each(commonSubjective.SelectOptions, function() { 
       var selectElement = createSelectElement(commonSubjective, this); 
       var placeHolder = "{" + i + "}"; 
       commonSubjective.Text = commonSubjective.Text.replace(placeHolder, selectElement.prop("outerHTML")); 
       i++; 
      }); 

     } 

     return commonSubjective.Text; 
    } 

function loadCommonSubjectives() { 

    var commonSubjectivesJson = JSON.parse($("#commonSubjectivesHidden").val()); 

    $.each(commonSubjectivesJson, function() { 
     $("#commonSubjectivesWindow").append($("<span>").append(formatCommonSubjectiveText(this)).prepend(
      $("<input>").attr("name", "CommonSubjectivities").attr("type", "checkbox").val(this.Id).prop("checked", this.IsSelected) 
     ).after("</br></br>")); 
    }); 

} 

Answer 1

Странно, только что сделал скрипку ... добавил переключатель динамически (только один) и выбранный элемент ... даже если добавляются после установки значения.

Fiddle here

Просто установите значение с помощью:

selectElement.val('val2'); 

От jquery docs

Валу() позволяет передать массив значений элементов. Это полезно при работе над объектом jQuery, содержащим такие элементы, как,, и s внутри .

Answer 2

Я не уверен на 100%, что вы хотите, поэтому я упрощу ответ, тогда вы сообщите мне, если это так или нет, что вы имели в виду.

Я понимаю:

• Создание <select> динамически
• возникают проблемы при добавлении атрибута selected в <option>

Ok, для этого примера, я использую обычный JS, то можно легко адаптировать в jQuery. Самая большая проблема заключается в том, чтобы помнить, какие объекты являются нормальными и какие объекты jQuery.

function makeSelect(ele, len, att) { 
 
    var sel = document.createElement("select"); 
 
    var tgt = document.querySelector(ele); 
 
    sel.id = "selectList"; 
 
    tgt.appendChild(sel); 
 

 
    for (var i = 1; i < len + 1; i++) { 
 
    var opt = document.createElement("option"); 
 
    opt.text = i; 
 
    opt.value = i; 
 
    sel.appendChild(opt); 
 
    } 
 
    sel.selectedIndex = att - 1; 
 
} 
 

 
makeSelect('#set', 10, 5);

body { 
 
    background: #111; 
 
} 
 
#set { 
 
    border-radius: 8px; 
 
    width: 5em; 
 
    background: #222; 
 
    border: 2px inset #FC3; 
 
} 
 
legend { 
 
    font: small-caps 400 21px/1.5 "Palatino Linotype"; 
 
    color: #FC3 
 
}

<fieldset id="set"> 
 
    <legend>DynSelect</legend> 
 
</fieldset>

Использование makeSelect(ele, len, att)

• ele: селектор элемента, что <select> добавит к. (то есть селекторов - #id, .class, tag).
• len: Количество вариантов.
• att: Индекс выбранной опции.

Сердце этого поста относительно Вашего вопроса можно резюмировать с этим:

Использование .selectedIndex

Простите меня за использование ссылок W3School, MDN не имеет его в списке. Если кто-нибудь нашел лучшую ссылку, пожалуйста, сообщите мне в комментариях.