twitter-bootstrap 如何在选择框选项更改时打开引导模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32755906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I open bootstrap modal on select box option change?
提问by peace_love
I have a form which is submitted on option change. It is connected to the database. So everytime I submit the form, the page reloads and the value is selected (the value is now saved as "car" in the database).
我有一个在选项更改时提交的表格。它连接到数据库。所以每次我提交表单时，页面都会重新加载并选择值（该值现在在数据库中保存为“汽车”）。
<form class="cars" id="carSelect" name="car" action="index.php" method="get">
<select onchange='this.form.submit()'>
<option <?php if ($row['car'] == Volvo ) echo 'selected'; ?> value="volvo">Volvo</option>
<option <?php if ($row['car'] == Saab ) echo 'selected'; ?> value="saab">Saab</option>
<option <?php if ($row['car'] == Opel ) echo 'selected'; ?> value="opel">Opel</option>
<option <?php if ($row['car'] == Audi ) echo 'selected'; ?> value="audi">Audi</option>
</select>
</form>
when the form is submitted and the selected option is Volvo, a modal (I am using the bootstrap modal) should appear. This is the bootstrap modal code, which opens the modal when I click on the "openBtn" Button.
当提交表单并且选择的选项是 时Volvo，应该会出现一个模式（我正在使用引导模式）。这是引导程序模态代码，当我单击“openBtn”按钮时会打开模态代码。
<a href="#" class="btn btn-default" id="openBtn">Volvo</a>
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Volvo</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">cancel</a>
<a href="#" class="btn btn-primary">save</a>
</div>
</div>
</div>
</div>
The bootstrap modal script for opening the modal with a button:
用于使用按钮打开模态的引导模态脚本：
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
So here is my approach:
所以这是我的方法：
$(window).load(function(){
if($(.cars option:Volvo).is(':selected')){
$('#modal-content').modal({
show: true
});
}
});
But my code is not working. The other problem is, the modal should only appear if I selected "Volvo". Not everytime the page is loaded. But I do not know how I can detect that the form was submitted before the page is loaded.
但是我的代码不起作用。另一个问题是，只有在我选择“沃尔沃”时才会出现模态。不是每次加载页面时。但我不知道如何检测在页面加载之前提交的表单。
回答by oshell
When you want the selected option you have to take it from the select DOMelement. So you would start with giving it an ID.
当您想要选择的选项时，您必须从选择DOM元素中获取它。所以你首先要给它一个 ID。
<select onchange='this.form.submit()' id="carSelect">
Then you can get the currently selected value and use it as condition.
然后您可以获取当前选择的值并将其用作条件。
$(window).load(function(){
var value = $( "#carSelect option:selected").val();
if(value == 'volvo'){
$('#modal-content').modal({
show: true
});
}
});
回答by user_2580211
I have the correct solution that you have been waiting for. Please look at this code :
我有您一直在等待的正确解决方案。请看这段代码：
function myFunction() {
var option_value = document.getElementById("numbers").value;
if (option_value == "3") {
alert("Hai !");
}
}<!DOCTYPE html>
<html>
<head>
<script>
// Add the above javascript code here !
</script>
</head>
<body>
<select id = "numbers" onchange = "myFunction()">
<option value = "1">1</option>
<option value = "2">2</option>
<option value = "3">Click me !</option>
</select>
</body>
</html>回答by Phpdev 2014
Try This
试试这个
<select onchange='funMyModel(this.value)'>
function funMyModel(val)
{
if(val=="Volvo"){
$('#modal-content').modal({
show: true
});
}
}
}
回答by Rahul Kumar
First, you can check the selected value in select option. Select adds the :selected property to the selected option which is a child of the dropdown.
首先，您可以在选择选项中检查选定的值。Select 将 :selected 属性添加到 selected 选项，该选项是下拉列表的子项。
$(document).ready(function(){
$("#select").on('change', function(){
if($(this).find(":selected").val()=='xyz'){
//alert($(this).find(":selected").val());
$('#modal-content').modal({
show: true
});
}
});
});
