追加选项后选择框，选择不尊重

我见过很多关于使用jQuery动态追加选项到选择框的其他问题，我按照他们的指示，但它仍然没有选择该选项。这里的HTML：追加选项后选择框，选择不尊重

<select id="updated-value-dropdown" class="form-control" style="min-width: 10em;"> 
</select>

而这里的Java脚本：

$('#edit-modal').on('show.bs.modal', function (e) { 
    target_element = $(this).find('#updated-value-dropdown'); 
    target_element.html(''); // clear options 
    var add_options = getOptionsToAdd(); 
    for (var i = 0; i < add_options.length; i++) { 
    target_element.append(new Option(add_options[i], add_options[i], i === 0, i === 0)); 
    } 
}

结果与正确选项的下拉框，我可以看到，当我检查网页的第一个选项是在HTML中标记为“selected”，因为它应该是，但它仍然不显示为实际选择时显示模式...为什么这不工作？

这是下拉的样子在页面上（没有点击它）：

这是下拉的样子，当我点击它 - 因为你可以看到，第一个选项是“选择”有复选标记旁边，但你可以在上面的图片中看到，它实际上没有出现在实际框中的值（除非我手动点击值）：

另外，我使用的引导，我不知道这有什么关系呢？

来源

2017-10-11 Dasmowenator

你能告诉我们所有必要的代码..也许问题是当它在模态显示.. –

噢，上帝，我是个白痴 - 代码中有另一个地方叫target_element.val(...)，并将它设置为一个不是选项列表中选项之一的值，所以这是清除值I试图选择。

来源

2017-10-11 18:53:15 Dasmowenator

不要说自己是白痴，所有人（包括我）有时会犯错:-)很高兴你找到了它。 –

-1

你可以这样做（在你的最后一行）：

target_element 
.append(new Option(add_options[i], add_options[i], i === 0, i === 0)) 
.promise() 
.done(function() { 
    target_element.find('option:first').prop('selected',true); 
    //if you want to select first option after append really done 
});

对不起，如果我误解你的需要，但我告诉你方式。

来源

2017-10-11 02:34:21

感谢您的答复。我刚刚尝试过，但结果与以前相同。 – Dasmowenator

在这种情况下，什么是.promise？你觉得你在等什么？我没有看到任何动画。 –

@KevinB不会错，'.promise（）'不仅仅适用于动画，它适用于ajax，甚至DOM插入，就像'.append（）'，'.html（）'，它们很少（甚至有时候）没有'.promise（）'有风险。你应该多读些关于它。 –

追加选项后选择框，选择不尊重

回答

相关问题