Question

From the jquery impromptu demo, for my purpose, I added a dropdown list to the popup form, but I am having problem figuring out how to have the “selected” value populated under the dropdown list in the modal form.

Take a look at my example, in the result box, notice that the first name on the list is ‘Mr John Doe’ and if you click on the ‘edit’ link, you will see that under the dropdown list, the title says ‘Mrs’. What i am hoping to achieve to have the right value populated in the dropdown list for ‘Title’ which in this case, it should say ‘Mr’.

Code:

function editUser(id){
    var user = $('#userid'+id)
    var fname = user.find('.fname').text();
    var lname = user.find('.lname').text();
    var title = user.find('.title').val();

    var txt = 'What would you like to change this to?'+
    '<div class="field"><label for="editfname">First Name</label><input type="text" id="editfname" name="editfname" value="'+ fname +'" /></div>'+
    '<div class="field"><label for="editlname">Last Name</label><input type="text" id="editlname" name="editlname" value="'+ lname +'" /></div>'+
    '<div class="field"><label for="edittitle">Title</label><select id="edittitle" name="edittitle" value="'+ title +'" /><option value="mrs" >Mrs</option><option value="mr" >Mr</option><option value="dr" >Dr.</option></select></div>';

...
}

HTML code:

<div id="userid1" class="user">
    <span class="controls">
         <a href="javascript:;" title="Edit User" class="edituser" onclick="editUser(1);">Edit</a>
    </span>
    <span class="fname">John</span>
    <span class="lname">Doe</span>
    <span class="title">Mr</span>
</div>

Hope I explained it well and appreciate any directions. thanks.

Answer 1

Add the loaded option to $.prompt like so:

loaded: function() { $("#edittitle").val(title); },

Also use the following:

var title = user.find('.title').text();

Instead of what you currently have:

var title = user.find('.title').val();

And lastly make sure you are consistent with your Naming.
For your option values make sure you use the same as the selected text. Don’t mix your cases! For example you want the following as your options:

<option value="Mrs">Mrs</option><option value="Mr">Mr</option><option value="Dr">Dr</option>

Make those changes and everything should work!