选择不适用于动态创建的选择元素。总是选择最后一个选项。

Question

我在下面的代码中创建了动态选择元素。该控件显示在浏览器上，没有问题。但是，我选择的选项不是屏幕上选择的选项。屏幕始终显示最后一项。

奇怪的是，如果我查看源代码，“选择”属性在我选择的选项上。但是，正在显示最后一个选项。

我尝试使用 .attr("selected", value === selectOption.SelectedValue)) 并且甚至没有在选项元素上添加“selected”属性。

似乎唯一可行的方法是在将 Select Element 附加到我的 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

val() 允许您传递元素值的数组。这很有用 在处理包含 、 和 s 等元素的 jQuery 对象时 .

Answer 2

我不是 100% 确定你想要什么，所以我会简化答案，然后你告诉我是不是你的意思。

我的理解：

• 动态创建<select>
• 将selected 属性添加到<option> 时遇到问题

好的，对于这个例子，我使用的是普通的 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、标签）。
• len：选项的数量。
• att：所选选项的索引。

这篇关于您的问题的帖子的核心可以概括为：

使用.selectedIndex

请原谅我使用 W3School 参考，MDN 没有列出它。如果有人找到更好的参考，请在 cmets 中通知我。