Question

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

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

我尝试使用.attr（＆＃34;选择＆＃34;，值=== selectOption.SelectedValue）），甚至没有在选项元素上添加“selected”属性。

唯一可行的方法是在Select元素附加到我的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（）允许您传递元素值数组。这很有用当处理一个jQuery对象时，包含像，和s之类的元素

Answer 2

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

我的理解：

动态创建// index.php $router = new Router(); $router->get('/', function($req, $resp){ // instantiate service classes // use service classes }); $router->get('/products', function($req, $resp){ // instantiate service classes // use service classes }); $router->get('/product/:productId', function($req, $resp){ // instantiate service classes // use service classes }); $router->post('/product/:productId', function($req, $resp){ // instantiate service classes // use service classes }); // ...
无法将<select>属性添加到selected

好的，对于这个例子，我使用普通的JS，它可以很容易地适应jQuery。最大的挑战是要记住哪些对象是正常的，哪些是jQuery对象。

<option>

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将附加到的元素的选择器。（即选择者 - #id，.class，tag）。
<select>：选项数量。
len：所选选项的索引。

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

使用.selectedIndex

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

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

2 个答案: