javascript - 为 Bootstrap 模式编写回调函数

Question

我有一个 Bootstrap 模式确认，我想在其中显示 html 选择列表的当前选定值以及通过传入变量的值。

我问了这个问题，并在这里收到了关于 displaying two values from the same html select list for a JavaScript confirmation popup 的很好的答案。 。但是，我现在需要用 Bootstrap 模式替换 JavaScript 确认。

这是 html 选择列表:

<select name="language_code" id="id_language_code">
    <option value="ar">Arabic - العربية</option>
    <option value="bg">Bulgarian - Български</option>
    <option value="zh-CN">Chinese (Simplified) - 中文 (简体)‎</option>
    <option value="en" selected="selected">English (US)</option>
    <option value="fr-CA">French (Canada) - français (Canada)‎</option>
</select>

我可以使用以下代码在 Bootstrap 模式上显示两种语言值:

$( "#submit_buttonA" ).attr('update-confirm', 'Are you sure you want to change the language of the website from ' + $('#id_language_code option[value=' + '{{ user.get_profile.language_preference }}' +  ']').text() + ' to ' + $('#id_language_code option:selected').text() + '?');

上面的代码行始终返回第二语言值 $('#id_language_code option:selected').text() (标记为 selected="selected")为 English (美国)在 Bootstrap 模式上，即使用户选择了保加利亚语 - Български。

我已经阅读了此内容，并相信这将需要 JavaScript 回调函数，因为 Bootstrap 模式是异步的，而 JavaScript 确认()不是异步的。

这是正确的吗？我尝试编写一个回调函数来返回用户选择的html选择列表的值，但它不起作用。我不确定这是否是正确的方法，或者我的代码技能不够好。

有人可以告诉我如何编写这个回调函数并解释它是如何工作的，因为我真的很困惑如何让它工作？

Answer 1

Bootstrap 的模态类已经具有以下用于 Hook 模态功能的事件。

1. show - 当调用 show 实例方法时，此事件立即触发。
2. shown - 当模式对用户可见时触发此事件(将等待 css 转换完成)​​。
3. hide - 当调用 hide 实例方法时立即触发此事件。
4. hidden - 当模态完成对用户隐藏时，会触发此事件(将等待 css 转换完成)​​。

您可以将上述事件用作

 $('#myModal').on('shown', function () {
    //your code to display the message
 })

希望这能解决您的问题!!

编辑 1:

真正的问题是jquery选择器$('#id_language_code option:selected').text();使用var selectedValue = $('#id_language_code').val(): 这将为您提供选择框中当前选定的值。您可以使用 $('#id_language_code option[value=' + selectedValue + ']').text(); 获取用户选择的文本。

您无需使用回拨功能来解决您的问题。

美好的一天