类似于国家明细页面的州和城市选择框

Question

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

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

Answer 1

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

本质上，你将有一个onchange事件用于下拉列表'select element‘，一旦它在该函数中发生变化，你将向你的服务发出一个请求，该请求将根据该id或某种标准来拉下城市的数据。该XHR将有一个回调，这样您就不会冻结您的浏览器。但在处理请求并获取信息的同时，您可以在将要加载的部分上弹出一个加载gif (或者这可以在XHR请求之前完成)，在XHR的回调函数中，您可以删除加载gif，并在下拉列表中填充正确的数据，网页也称为请求完成。

--编辑添加的想法，从哪里开始

​

<!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>

​