Question

当用户点击某个项目时，我有以下选择下拉列表：

        $(this).html($("<select/>", {
          class: 'sel',
        }).append($("<option/>", { text: "WIP" }))
          .append($("<option/>", { text: "C" }))
          .append($("<option/>", { text: "A" }))
          .append($("<option/>", { text: "AR" }))
          .append($("<option/>", { text: "NS" }))
        );

此外，我有一个名为status的变量，定义为“WIP”，“C”，“A”，“AR”或“NS”。

status = trim(($(this).text()));

我想这样做，当我点击select下拉菜单时，会选择option == status。例如：

status = "WIP"
<select class="sel">
     <option selected="selected">WIP</option>
     <option>C</option>
     ...
</select>

Answer 1

我理解这个问题的方式是，你想设置一个默认的option，以便在用户点击之前将选择一个选项。

以下是您将如何做到这一点：

var status = "WIP"; $("<select/>", { class: 'sel', }) .append( $("<option/>", { text: "WIP" }) ) .append( $("<option/>", { text: "C" }) ) .append( $("<option/>", { text: "A" }) ) .append( $("<option/>", { text: "AR" }) ) .append( $("<option/>", { text: "NS" }) ) .val( status ) .appendTo(this);

请注意，整个select元素应该在append之前构建到DOM。这对于性能来说很多更好，因为与DOM的任何交互都非常昂贵。

Answer 2

如果将选项文本值放在数组中，也可以减少代码的重复：

var options = ['WIP','C','A','AR','NS'];
var menu = $('<select>',{class:'sel'});

$.each(options,function(i,text){
    menu.append($('<option>',{text:text}));
});

menu.val(status).appendTo(this);

Answer 3

您可以执行以下操作，以便在用户点击选择内容时选择存储的值。

小提琴。

http://jsfiddle.net/TRCWh/

码

<div id = "hello"></div>

var select = "A";
$('#hello').html($("<select/>", {
          class: 'sel',
        }).append($("<option/>", { text: "WIP" }))
          .append($("<option/>", { text: "C" }))
          .append($("<option/>", { text: "A" }))
          .append($("<option/>", { text: "AR" }))
          .append($("<option/>", { text: "NS" }))
                );

$(document).on("click",".sel",function(){
    $(this).val(select);
})

注意：我已经忽略了一段时间内接受的编码实践（有些人可能会说）。只是为了快速解决你的问题：）

Javascript默认选择一个选项

3 个答案: