Question

我正在尝试模拟一个州和城市选择框，就像国家分解网站一样。以下是网址：https://www.nttsbreakdown.com/ntts/programs/main/main.php

在网页的左侧，如果您选择一个州，则城市选择框会显示＆＃34;正在加载数据＆＃34;然后弹出该州的城市列表。您可以在城市选择框中搜索城市名称。此外，城市选择框也会自动选中。我试图使用选择的JQuery来模拟但不太喜欢它。首先，我必须单击以选择状态，然后单击以选择城市。不像国家分类网站，您只需要点击状态和城市自动下拉，您可以在城市选择框中搜索。我想知道他们是否使用其他东西而不是选择JQuery。如果有人能指出我正确的方向，我真的很感激。

Answer 1

将引导您进入正确方向的主题将从通过JQuery / Ajax实现或XHR的异步请求开始。 MDN的丰富资源。

基本上，您的下拉列表中有一个onchange事件＆＃39; select element＆＃39;一旦它在该功能中发生变化，您就会向您的服务请求，该请求将根据该ID或某些标准提取城市数据。 XHR将进行回调，因此您不会冻结浏览器。但是在处理请求并获取信息的同时，您可以在将要加载的部分上弹出加载gif（或者可以在XHR请求之前完成），在XHR的回调函数中，您可以删除加载gif和poulate下拉列表和网页中的正确数据也请求完成。

- EDIT添加了从哪里开始的想法

＆＃13;

<!DOCTYPE html>
<html> 
    <head>        
    </head>
    <body>
        <input id="state" list="stateList" name="stateList" />
        
        <datalist id="stateList">
            <option value="Texas" />
            <option value="Arizona" />
        </datalist>
        
        <input id="city" list="cityList" name="cityList" />
        
        <!-- this data list is populated from an ajax request /java script once the state is selected you do a query based on its selected value -->
        <datalist id="cityList">
            <option value="something1" />
            <option value="something2" />
            <option value="something3" />
            <option value="something4" />
        </datalist>
    </body>
    
    <script type="text/javascript">
        var inputStateHandler = document.getElementById('state');
        var inputCityHandler = document.getElementById('city');
           
        inputStateHandler.addEventListener('input', function() {
            inputCityHandler.focus();
            inputCityHandler.open(); //this is what you need to figure out open does not exist as of yet.
        });
    </script>
</html>

＆＃13;

州和城市选择框如国家分类页面

1 个答案: