Question

我刚才有一个关于Ajax的快速问题。所以，我是这个小脚本代码。

   $(document).ready(function() {
    $("#Reisemittel").onChange(function(){
     //   alert($('#Reisemittel option:selected').val());
     var inhalt = $('#Reisemittel option:selected').val();

    })
});

if(inhalt.style.display == "block") {
        inhalt.style.display = "none";

}
else {
    inhalt.style.display = "block";

}

}

然后我得到了这个Html选择选项

     <select id="Reisemittel" size=1>
                    <option value=0>bitte wählen...</option>
                    <option value="EigenesFahrzeug">Eigenes Fahrzeug</option>
                    <option value="BINOSFahrzeug">BINOS Fahrzeug/Mietwagen</option>
                    <option value="Flug">Flug</option>                    
                    <option value="Bahn">Bahn</option>     
                </select>

我想要尝试的是，当我将选择选项中的值更改为＆＃34; EigenesFahrzeug＆＃34;

          <div id="EigenesFahrzeug" style="display: none;">Test </div>

此Div将显示

感谢您的帮助。

Answer 1

最简单的方法是使用toggle()：

$(document).ready(function() {
    $("#Reisemittel").on('change', function(){
        var inhalt = $('#Reisemittel option:selected').val();
        $('#EigenesFahrzeug').toggle(inhalt == 'EigenesFahrzeug');
    })
});

您当前的代码不起作用，因为条件在onChange()处理程序之外（并且，inhalt是一个值，而不是一个元素。）

Answer 2

尝试这样的事情：

<html>
<head>
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("#Reisemittel").change(function(event) {
                var id = $(event.target).val();
                $(".toggleable").hide();
                var inhalt = $("#" + id);
                inhalt.show();
            });
        });
    </script>
</head>
<body>
<select id="Reisemittel" size=1>
    <option value=0>bitte wählen...</option>
    <option value="EigenesFahrzeug">Eigenes Fahrzeug</option>
    <option value="BINOSFahrzeug">BINOS Fahrzeug/Mietwagen</option>
    <option value="Flug">Flug</option>
    <option value="Bahn">Bahn</option>
</select>
<div id="EigenesFahrzeug" class="toggleable" style="display:none;">
    EigenesFahrzeug!!!
</div>
</body>
</html>

Ajax - Onchange show / Hide

2 个答案: