引导模态确认后更改选择列表

问题描述

我有一个选择列表。

当用户更改选择列表选项时，我希望显示引导模态，并且仅当选中模态的确认按钮时，才更改选择列表。

我只是似乎无法正确获取代码，也找不到Google答案。

这是我的选择列表代码：

<select id="id_language_code" name="language_code" required="">

    <option value="en" selected="selected">English (US)</option>
    <option value="en-ca">English (Canada) - English (Canada)?</option>
    <option value="en-gb">English (UK) - English (UK)?</option>
    <option value="es">Spanish (Spain) - espa?ol (Espa?a)?</option>
    <option value="es-419">Spanish (Latin America) - espa?ol (Latinoamérica)?</option>
    <option value="fr">French (France) - fran?ais (France)?</option>
    <option value="fr-ca">French (Canada) - fran?ais (Canada)?</option>
    <option value="fr-ch">French (Switzerland) - fran?ais (Suisse)?</option>

</select>

这是我的模态代码：

<div id="language_change_modal" class="modal rounded modal-confirm-medium-width fade" style="height: 230px;" role="dialog" aria-labelledby="cancelConfirmLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><icon class="glyphicon glyphicon-remove"></icon></button><h4 class="modal-title" id="cancelConfirmLabel">{% trans "Confirm Change Language" %}</h4>
    </div>
    <div class="modal-body-confirm">{% trans "This will reset all your details." %} {% trans "Are you sure you want to change languages?" %}</div>
    <div class="modal-footer">
        <a class="btn rounded btn-default" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle icon_padding"></i>{% trans "No" %}</a>
        <span class="spacer"></span>
        <a class="btn rounded btn-primary" id="cancelConfirmOK"><i class="fa fa-check-circle icon_padding"></i>{% trans "Yes" %}</a>
    </div>
</div>

这是我的js / jq触发代码：

$(document).ready(function() {
  ....
  $('#id_language_code').on('change', function() {
    $('#language_change_modal').modal('show');  // user confirm language change.
  });

由于您已经在引用Bootstrap，因此强烈建议您使用 。 与必须写出整个模态框相比，它易于使用并且更加干净。此外，它还附带了回调（即开即用）来为您提供帮助。

我为您创建了一个 ，以显示我的意思。 我没有更改选择列表，但是基于单击“是”按钮（这是根据您的评论要查找的内容）显示警告。 您可以编辑和自定义有关bootbox的某些内容以适合您的需求。

这是我的示例代码。

HTML

<select id="My-Select">
  <option value="0">Select Option</option>
  <option value="1">Option One</option>
  <option value="2">Option Two</option>
  <option value="3">Option Three</option>
</select>

jQuery的

$("#My-Select").change(function(){

  // use bootbox for easy implementation
  bootbox.confirm({
    message: "Are you sure you want to do this?",
    buttons: {
        confirm: {
            label: 'Yes',
            className: 'btn-success'
        },
        cancel: {
            label: 'No',
            className: 'btn-danger'
        }
    },
    callback: function (result) { // result is 'true' if the 'yes' button is clicked
        if(result)
            alert("Yes, I want to change the select list.");
            // Here is where you would reset the select list
        else
            alert("No, I do not want to change the select list.");
            // Here is where you do not reset the select list
    }
});

});

让我知道这是否有帮助！