Javascript 使用ajax通过下拉菜单更新div标记

我想使用AJAX更新div标记。单击“显示”按钮时，将向下拉菜单中指定的页面发出AJAX请求。该页面上包含的JSON对象将显示在标有“Other page”的div中。我将使用多个JSON文件。如何使用下拉菜单更新div标记

JS:

HTML:

---

要通过下拉列表触发事件，只需执行以下操作

$(document).ready(function() {
    $('#rooms').on('change', function() {
        var data = $(this).val();  //you can retrieve the drop down list value
        start();
    });
}

---

在start方法中，您可以调用ajax，然后在回调成功时，您可以修改div。正如您现在所做的那样，您需要在select选项中指定json的值，并在提交时将这些值传递给ajax函数

HTML:

如果您希望在用户单击选项而不是等待他们提交表单时更改div，可以执行以下操作：

$(document).ready(function(){
      $("#rooms").change(function(){
        var jsonUrl = $(this).val();
        $("#clickme").text("Calling Server");
        $.ajax({
            url : jsonUrl, 
            data: $("#frm").serialize(),
            dataType : 'json',
            success: function (data) {
                $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)"));
            }, 
            error : function(jqXHR, textStatus, errorThrown) {
                $("#clickme").text("error occurred:" + errorThrown);
            }, 
            dataType : 'json'
        });
    });
});

---

你的问题是？如何使用下拉菜单更新div标签？你能提供一个小提琴来演示这个问题吗

$(document).ready(function() {
    $('#rooms').on('change', function() {
        var data = $(this).val();  //you can retrieve the drop down list value
        start();
    });
}

<div id="clickme">Other page</div>
<form method="post" id="frm">
    <table>
        <tr>
            <td>Current roommate: </td>
            <td>
                <select name="room" id="rooms">
                    <option value="mikey.json" id="mi">Mikey</option>
                    <option value="sarah.json" id="sa">Sarah</option>
                    <option value="sam.json" id="er">Sam</option>
                </select>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Display">
            </td>
        </tr>
    </table>
</form>

$(document).ready(function(){
    $("#frm").submit(function(event){
        event.preventDefault();
        var jsonUrl = $("#rooms").val();
        $("#clickme").text("Calling Server");
        $.ajax({
            url : jsonUrl, 
            data: $("#frm").serialize(),
            dataType : 'json',
            success: function (data) {
                $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)"));
            }, 
            error : function(jqXHR, textStatus, errorThrown) {
                $("#clickme").text("error occurred:" + errorThrown);
            }, 
            dataType : 'json'
        });
    });
});

$(document).ready(function(){
      $("#rooms").change(function(){
        var jsonUrl = $(this).val();
        $("#clickme").text("Calling Server");
        $.ajax({
            url : jsonUrl, 
            data: $("#frm").serialize(),
            dataType : 'json',
            success: function (data) {
                $("#clickme").text("result: " + (data && data.name ? data.likes: "(No likes)"));
            }, 
            error : function(jqXHR, textStatus, errorThrown) {
                $("#clickme").text("error occurred:" + errorThrown);
            }, 
            dataType : 'json'
        });
    });
});