我有一个选择列表。
当用户更改选择列表选项时,我希望显示引导模式,并且仅当选中模态的确认按钮时,才更改选择列表。
我似乎无法得到正确的代码,无法找到谷歌的答案。
这是我的选择列表代码:
<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.
});
您需要做的就是在模态内的“是”和“否”按钮上添加单击事件侦听器,并保存上一个选择选项。
我稍微更新了模态html,因为模态看起来不太好。此外,我还将“数据 - 消除”属性添加到“是”按钮。
当用户选择“是”时,你们都很好,选择将会改变,我们将这个新选择保存在我们的变量$preSelection
中。
当用户选择“否”时,我们将选择重置为先前的值。这通常是这样做的方法,我还没有看到任何其他方法来专门阻止select onchange。
$(document).ready(function() {
let $prevSelection = $("#id_language_code option:selected");
$('#id_language_code').on('change', function() {
$('#language_change_modal').modal('show'); // user confirm language change.
});
$('#yesButton').on('click', function() {
$prevSelection = $("#id_language_code option:selected");
console.log("Yes was clicked. Allowing selection change and saving new selection");
});
$('#cancelButton').on('click', function() {
console.log("No was clicked. Resetting select to previous value");
$prevSelection.prop("selected", true);
});
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<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" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirm Change</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>This will reset all your details. Are you sure you want to change languages?
</p>
</div>
<div class="modal-footer">
<a class="btn rounded btn-default" id="cancelButton" data-dismiss="modal" aria-hidden="true"><i class="fa fa-times-circle icon_padding"></i>No</a>
<span class="spacer"></span>
<a class="btn rounded btn-primary" id="yesButton" data-dismiss="modal"><i class="fa fa-check-circle icon_padding"></i>Yes</a>
</div>
</div>
</div>
</div>
由于您已经引用了Bootstrap,我强烈建议您使用Bootbox.confirm。它易于使用,并且比写出一个完整的模态盒要清晰得多..而且它带有回调(开箱即用)来帮助你。
我为你创造了一个JSFiddle,以表明我的意思。我没有更改选择列表,但是我显示的是基于是否单击“是”按钮的警报(根据您的评论,这是您正在寻找的)。您可以编辑和自定义有关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
}
});
});
如果有帮助,请告诉我!