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

state and city select box like national breakdown page

本文关键字：国家 细分 分页 类似于 城市 选择      更新时间：2023-09-26

我正试图模拟一个与国家细分网站完全相似的州和城市选择框。这是网址：https://www.nttsbreakdown.com/ntts/programs/main/main.php

在网页的左侧，如果您选择了一个州，城市选择框会显示"加载数据"，然后弹出该州的城市列表。您可以在城市选择框中搜索城市名称。城市选择框也会自动选择。我正在尝试使用JQuery进行模拟，但不太喜欢。首先，我必须单击选择一个州，然后单击选择城市。不像全国性的细分网站，你只需要点击州和城市自动下拉框，就可以在城市选择框中搜索。我想知道他们是否在使用其他东西，而不是选择JQuery。如果有人能为我指明正确的方向，我真的很感激

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

本质上，你会有一个下拉列表"选择元素"的onchange事件，一旦它在该功能中发生变化，你就会向你的服务发出请求，根据该id或某种标准提取城市的数据。XHR将有一个回调，这样您就不会冻结浏览器。但与此同时，在处理请求和获取信息的过程中，您可以在将要加载的部分上弹出一个加载gif（也可以在XHR请求之前完成），在XHR的回调功能中，可以删除加载gif并将正确的数据放入下拉列表和网页中，也就是请求完成。

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

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

相关文章：