javascript - 使用 JQuery 在动态 JQuery UI 对话框中为动态创建的表单元素设置值

Question

我正在尝试从服务中读取数据(返回 JSON 对象)并在动态 JQuery UI 对话框中创建可编辑的表单，以便最终用户可以使用它进行更改和提交。麻烦的是，当我从服务器获取数据时，我似乎无法在表单中设置数据。如果我不使用对话框，那么一切正常。

我创建了一个关联的 JSFiddle以防万一。

var dialog_box = $('<div></div>');
var animal = { kind : "Cat", has_whiskers : true };
var s = $('<select />', {
    "id":"s1"
}).append(
    $('<option />', 
        {
            value:"Dog", 
            text:"Dog"
        }
    ),
    $('<option />', 
        {
            value:"Cat", 
            text:"Cat"
        }
    ),
    $('<option />', 
        {
            value:"Bird", 
            text:"Bird"
        }
    )
);
s.appendTo(dialog_box);

// doesn't work
$('#s1 option:[value="'+ animal.kind +'"]').prop('selected', true);

var new_div = $('<div/>').html('<input type="checkbox" id="has_whiskers_checkbox" />');

new_div.appendTo(dialog_box);

(animal.has_whiskers) ? $("#has_whiskers_checkbox").prop("checked", true) : $("#has_whiskers_checkbox").prop("checked", false);

dialog_box.dialog({
     autoOpen: false,
     modal: true,
     buttons: {
         "OK": function() {
              console.log("OK Pressed");
              $( this ).dialog( "close" );
              $( this ).remove();
           }
        }
}).dialog('open');

Answer 1

$('#s1 option:[value="'+ animal.kind +'"]', dialog_box).prop('selected', true);

Example