如何使用 jquery Impromptu 从文本 div 中选择下拉列表中的值

发布于 12-04 01:33 字数 1733 浏览 2 评论 0原文

从 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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

冷血2024-12-11 01:33:57

将加载的选项添加到 $.prompt 中,如下所示:

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

还可以使用以下内容:

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

而不是您当前拥有的:

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

最后确保与您的命名一致。
对于您的选项值,请确保使用与所选文本相同的值。不要混淆你的情况!例如,您希望以下选项作为您的选项:

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

进行这些更改,一切都应该正常!

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!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文