Javascript 如何首先使用js通过Ajax调用将数据填充到select元素中_Javascript_Html_Ajax

Javascript 如何首先使用js通过Ajax调用将数据填充到select元素中

javascript html ajax

Javascript 如何首先使用js通过Ajax调用将数据填充到select元素中,javascript,html,ajax,Javascript,Html,Ajax,我有一个包含两个选择选项的html页面，它是通过onclick函数中的ajax调用从Servlet获取值。但我第一次发现数据没有填充到select选项中。单击“下一步”，仅填充值。我第一次知道它只是将选项添加到select元素。如何在第一次单击数据本身时填充数据。这是我的密码 <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</title> </h

我有一个包含两个选择选项的html页面，它是通过onclick函数中的ajax调用从Servlet获取值。但我第一次发现数据没有填充到select选项中。单击“下一步”，仅填充值。我第一次知道它只是将选项添加到select元素。如何在第一次单击数据本身时填充数据。这是我的密码

<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <form>
    <table>
        <tr>
            <th>Name</th>
            <td><input type="text" name="fName"></td>
        </tr>
        <tr>
            <th>Age</th>
            <td><input type="text" name="age"></td> 
        </tr>
        <tr>
            <th>Country</th>
            <td>
                <select name="country" id="country" onclick="loadCountry()">
                    <option selected="selected">-- Select --</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>State</th>
            <td>
                <select name="state">
                    <option value="">-- Select --</option>
                </select>
            </td>
        </tr>
    </table>
    </form>
    <script type="text/javascript">
    var status = true;
    function loadCountry()
            {
                var xhttp;
                var cArray;
                var cArrayJs;
                if(status)
                {
                if(window.XMLHttpRequest)
                    {
                        xhttp = new XMLHttpRequest();
                    }
                else
                    {
                        xhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                xhttp.onreadystatechange = function()
                {
                    var selectCountry = document.getElementById("country");
                    if(this.readyState == 4 && this.status == 200)
                        {

                                cArray = this.responseText;
                                cArrayJs = JSON.parse(cArray);
                                for(x in cArrayJs)
                                    {
                                        selectCountry.add(new Option(cArrayJs[x]));
                                    }
                                    status = false;
                                }

                        }
                }

                xhttp.open("GET","servlet1",false);
                xhttp.send();
            }
    </script>
</body>
</html>

根据我的观点，这是在页面加载时加载selectlist的最佳实践，但如果您想在单击下拉菜单时执行相同的操作，您可以按照下面的代码段执行，其中只有一个ajax调用将在第二次执行，而不会执行ajax调用

我也要你看看

var-load=false； $.Staus.textload； $country.onclick，函数{ $.Staus.textload；如果加载回来 var selectCountry=document.getElementByIdcountry；选择country.addnew选项hello1；选择country.addnew选项hello2；选择country.addnew选项hello3；加载=真； $.Staus.textload； };

下拉列表加载：为什么需要在单击时填写选择列表？不建议这样做，因为选择列表会在每次单击时调用ajax请求，而不是在页面加载时调用ajax请求。您可以填写下拉列表。我对ajax不熟悉，只是为了学习，我就是这样做的。我还添加了一个标志，第一次它是true，下一次它将设置为false，所以它不会进行ajax调用。如果不合适，请指导我编写正确的代码，并在哪里正确使用ajax我认为您在错误的轨道上，每次单击选择列表，它都会调用loadCountry函数，并且每次状态变量都设置为true，因此，如果您想确认检查并单击选择列表并检查，那么这样做没有任何意义cosole获取更多信息这是一个很好的例子，但是如何避免第二次调用ajax呢。请给我一个用于此场景的示例。还有一些建议，我应该在哪里以适当的方式使用ajax