Question

我有一个表格，可以在选项更改时提交。它连接到数据库。因此，每次我提交表单时，页面都会重新加载并选择值（该值现在保存为＆＃34; car＆＃34;在数据库中）。

<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时，应出现一个模态（我正在使用引导模式）。这是bootstrap模态代码，当我点击＆＃34; openBtn＆＃34;时会打开模态。按钮。

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

使用按钮打开模态的bootstrap模态脚本：

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

所以这是我的方法：

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

但是我的代码无效。另一个问题是，只有在我选择＆＃34;沃尔沃＆＃34;时才会出现模态。不是每次加载页面。但我不知道如何在页面加载之前检测到表单已提交。

Answer 1

如果需要所选选项，则必须从选择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
        });
    }
});

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

Answer 3

试试这个

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

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

}

Answer 4

首先，您可以在选择选项中检查所选值。选择将：selected属性添加到所选选项，该选项是下拉列表的子项。

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

    });
});

Answer 5

我知道这个问题很老，但是对于那些可能像我一样发现的人，我想分享我所做的一小部分改编，因此，如果每个选择选项都有一个模态，则无需检查每个以及每种可能性：

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

如何在选择框选项更改时打开bootstrap模式？

5 个答案: