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

Select not working for dynamically created Select Elements. Always selecting last option.

本文关键字：选择 最后一个 选项 图元 不适用 适用于 动态 创建      更新时间：2023-09-26

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

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

我尝试使用.attr（"selected"，value===selectOption.SelectedValue），但这甚至没有在option元素上添加"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>"));
    });
}

奇怪，刚刚做了一把小提琴。。。动态添加了一个选择框（仅一个）并选择了一个项目。。。即使在设置值之后附加。

在这里摆弄

只需设置值：

selectElement.val('val2');

来自jquery文档

val（）允许您传递一个元素值数组。这很有用在处理包含元素的jQuery对象时.

我不能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，tag）
  • len：选项数
  • att：所选选项的索引

这篇文章关于你的问题的核心可以概括为：

使用.selectedIndex

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

相关文章：