如何在选择框选项更改时打开引导模式？答案

【问题标题】：How can I open bootstrap modal on select box option change?如何在选择框选项更改时打开引导模式？
【发布时间】：2015-09-24 07:40:41
【问题描述】：

我有一个在选项更改时提交的表单。它连接到数据库。所以每次我提交表单时，页面都会重新加载并选择值（该值现在在数据库中保存为“汽车”）。

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

当提交表单并且选择的选项是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>

通过按钮打开模态的引导模态脚本：

$('#openBtn').click(function () {
    $('#modal-content').modal({
        show: true
    });
});

这是我的方法：

$(window).load(function(){
    if($(.cars option:Volvo).is(':selected')){
        $('#modal-content').modal({
            show: true
        });
    }
});

但我的代码不起作用。另一个问题是，仅当我选择“沃尔沃”时才会出现模式。并非每次加载页面。但我不知道如何在页面加载之前检测到表单已提交。

【问题讨论】：

标签： php jquery twitter-bootstrap

【解决方案1】：

当您想要选择的选项时，您必须从 select DOM 元素中获取它。所以你首先要给它一个 ID。

 <select onchange='this.form.submit()' id="carSelect">

然后就可以获取当前选中的值作为条件。

$(window).load(function(){
    var value = $( "#carSelect option:selected").val();
    if(value == 'volvo'){
        $('#modal-content').modal({
            show: true
        });
    }
});

【讨论】：

您好，这很好用。我还有一个问题。每次我加载页面时，模式都会出现。但它应该只有在我第一次将选项更改为“volvo”后才会出现
when the option is changed, then the form is submitted and if then "Volvo" is selected, open the modal.但如果我不更改选项而只加载页面，则不会。
只有在“更改”事件中触发它时才会起作用。但这在同一事件上提交表单时不起作用。您可以通过 ajax 提交表单来解决此问题。

【解决方案2】：

我有您一直在等待的正确解决方案。请看这段代码：

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>

【讨论】：

【解决方案3】：

首先，您可以在选择选项中检查所选值。 Select 将 :selected 属性添加到作为下拉列表子项的选定选项中。

$(document).ready(function(){   
    $("#select").on('change', function(){        
        if($(this).find(":selected").val()=='xyz'){
            //alert($(this).find(":selected").val());
            $('#modal-content').modal({
                show: true
            });
        }

    });
});

【讨论】：

【解决方案4】：

我知道这个问题已经很老了，但是对于那些可能会像我一样发现它的人，我想分享我所做的一个小调整，所以如果我每个选择选项都有一个模式，我不需要检查每个以及每种可能性：

$(document).ready(function(){   
    $("#myModalSelector").on('change', function(){ 
        var selected = $(this).find(":selected").val();
        $('#' + selected ).modal({
            show: true
        });
    });
});

【讨论】：

【解决方案5】：

试试这个：

<select onchange='funMyModel(this.value)'>

function funMyModel(val)
{
    if(val=="Volvo"){
        $('#modal-content').modal({
            show: true
        });
    }
}

【讨论】：

嗨，这不起作用。我忘了说，我有 3 个在此页面上看起来相同的 froms
您好，我在表单中添加了一个 id，就像 Horsch Nok 建议的那样。所以现在它正在工作。但我现在的问题是，每次加载页面时都会出现模式，不仅是我将选项更改为“沃尔沃”
谢谢，但我需要onchange='this.form.submit()'，因为每次更改选项都会将值保存在 SQL 数据库中