如何使用 jquery Impromptu 从文本 div 中选择下拉列表中的值
从 jquery impromptu demo 中,出于我的目的,我在弹出表单中添加了一个下拉列表,但我在弄清楚如何在模式形式的下拉列表下填充“选定”值时遇到问题。
看看我的示例,在结果框中,请注意列表中的第一个名字是“Mr John Doe”,如果您单击“编辑”链接,您将在下拉列表下看到标题为“Mrs”。我希望实现的目标是在“标题”的下拉列表中填充正确的值,在本例中,它应该显示“先生”。
代码:
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 代码:
<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>
希望我能很好地解释并感谢任何指示。谢谢。
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.
将加载的选项添加到 $.prompt 中,如下所示:
还可以使用以下内容:
而不是您当前拥有的:
最后确保与您的命名一致。
对于您的选项值,请确保使用与所选文本相同的值。不要混淆你的情况!例如,您希望以下选项作为您的选项:
进行这些更改,一切都应该正常!
Add the loaded option to $.prompt like so:
Also use the following:
Instead of what you currently have:
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:
Make those changes and everything should work!