Question

我正在开发一个项目，我需要根据下拉值显示/隐藏div。显示/隐藏在同一页面上执行时工作正常，但是当我在加载AJAX的函数中尝试这样做时，它会失败。

我希望有一些我不知道的遗失。

简而言之，我想在AJAX加载页面上选择选项时隐藏/显示div。

的index.php ：

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>
    function showUser(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                }
            };
            xmlhttp.open("GET","getdata.php?q="+str,true);
            xmlhttp.send();
        }
    }
    </script>
</head>

<body>
    <form>
        <!-- there is nothing related to it... it's here because I have copied it from the w3schools website -->
        <select name="users" onchange="showUser(this.value)">
            <option value="">Select a person:</option>
            <option value="1">getdata</option>
        </select>
    </form>
    <br><br><br>
    <div id="txtHint" style="background-color: #CCCCCC"><b> ajax data will listed here</b></div>
</body>
</html>

访问getdata.php ：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p> its page2</p>
    <select name="type" id="type" >
        <option value="1show" >show div 1</option>
        <option value="2show" >show div 1 </option>
    </select>

    <div id="div1" style="display:none">
        div1 data
    </div>
    <div id="div2" style="display:none">
        div 2 data 
    </div>
</body>
</html>

<script>
$('#type').on('change', function() {
    if ( this.value == '1show' ) {
        $("#div1").show();
        $("#div2").hide();
    } else if(this.value == '2show') {
        $("#div1").hide();
        $("#div2").show();
    }
});
</script>

Answer 1

可能是INDEX.php的ajax只加载html数据。所以我创建另一个文件，其中包含所有脚本，并且工作正常。还在等待任何专家解释为什么会这样。

这包含js数据这是我在调用第一个ajax后调用索引页面中的js文件的方法 $（＆＃34;＃盒＆＃34）的负载。（＆＃34; ab.js＆＃34）;

Answer 2

您需要将事件绑定到文档。

尝试

$(document).on('change','#type' ,function() {
    if ( this.value == '1show' ) {
        $("#div1").show();
        $("#div2").hide();
    } else if(this.value == '2show') {
        $("#div1").hide();
        $("#div2").show();
    }
});

jQuery没有处理AJAX加载的内容来显示/隐藏div内容

2 个答案: