javascript - 如何根据<p>值选择下拉列表

Question

点击表单编辑下拉列表时出现问题

下拉列表显示第一项。我需要根据 <p>Professor<p/> 选择值

html

<p>Title</p>
<p class='title'>Professor</p>

JQuery

$('.title').click(function(){
    $(this).replaceWith('<select class="title" name="title"><option >Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
});​

Demo

Answer 1

如果您尝试默认选择“教授”，这会成功:

$('.title').click(function(){
    var target = $(this);
    var text = target.text();
    var select = $('<select class="title" name="title"><option selected="selected">Please Select</option><option value="Mr">Mr</option><option value="Mrs">Mrs</option><option value="Ms">Ms</option><option value="Miss">Miss</option><option value="Dr">Dr</option><option value="Professor">Professor</option><option value="Sir">Sir</option></select>');
    select.find('option[value="' + text + '"]').prop("selected", true);
    target.replaceWith(select);
});

Fixed jsFiddle