Question

我有一个html页面，其中包含两个选择选项，它通过onclick()函数中的ajax调用从Servlet获取值。但我第一次没有数据填充到选择选项中。通过下一次单击，仅填充值。我第一次知道它只是将选项添加到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>

Answer 1

根据我的观点，这是在页面加载时加载selectlist的最佳做法，但如果您想在点击下拉列表中执行相同操作，则可以执行此操作，如下面的代码段，其中只有一个ajax第二次打电话不会拨打电话。

我希望你也看看this demo

var loaded = false;
$(".Staus").text(loaded);
$("#country").on("click", function() {
  $(".Staus").text(loaded);
    if (loaded)
        return;
    var selectCountry = document.getElementById("country");
    selectCountry.add(new Option("Hello1"));
    selectCountry.add(new Option("Hello2"));
    selectCountry.add(new Option("Hello3"));
    loaded = true;
  $(".Staus").text(loaded);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="country" id="country">
</select>
DropDown Loaded : <Label class="Staus"></Label>

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

1 个答案: