Javascript 如何使用select标记添加内容而不刷新页面（AJAX）

我正在尝试创建一个页面，当有人单击选择表单中的某个选项时，会出现另一个选择表单，而不必刷新页面。我知道您使用AJAX是为了不刷新，但我的代码在尝试时不知何故无法工作

HTML

假定加载的内容（另一个选择表单）

选择一个站点
人口统计学的
罪行
学校

---

但是有什么不对呢？

正如@Goose在评论中所说的，您可以隐藏选择框，并根据显示的选择选项的值显示它们，而不是使用Ajax调用，如下所示：

HTML JS

---

如果您的内容是相当静态的，我将使用以下不调用其他http调用的代码：

HTML:

---

如果有帮助，请告诉我。干杯

哪里是

按钮。开关

？这里真的需要Ajax吗？似乎所有本地代码都可以做到这一点。是的，如果您不需要从服务器获取任何其他数据，为什么不绑定列表并使用JS显示/过滤内容？绑定列表是什么意思@GooseBy binding我的意思是建立包含数据的

select

列表。构建每个列表，隐藏未使用的列表。当用户在第一个列表中进行选择时，显示第二个列表并根据需要过滤选项，等等。当我单击其中一个选项时，它会将我带到一个未找到对象的Url页面@洛伦波森：哪种选择@摄影师

<div id="example">
<select id="foo">
<option value="">lets make another</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>

</select>
   </div>
   <div id="result">
   </div>

$(document).ready(function() {
$('#example').on('click', 'button.switch', function() {
    $.ajax('AjaxLoadedContent.html')
    .done(function(response){
    $('#result').html(response);
    });
});
});

<select id="foo">
<option value="">Pick a site</option>
<option value="index.html">Demographic</option>
<option value="index.html">Crime</option>
<option value="index.html">School</option>

</select>

<div id="example">
    <select id="foo">
        <option value="">lets make another</option>
        <option value="demographic">Demographic</option>
        <option value="crime">Crime</option>
        <option value="school">School</option>
    </select>
    <select id="demographic" class="toggle">
        <option value="">Demographic</option>
        <option value="d1">d1</option>
        <option value="d2">d2</option>
        <option value="d3">d3</option>
    </select>
    <select id="crime" class="toggle">
        <option value="">Crime</option>
        <option value="c1">c1</option>
        <option value="c2">c2</option>
        <option value="c3">c3</option>
    </select>
    <select id="school" class="toggle">
        <option value="">School</option>
        <option value="s1">s1</option>
        <option value="s2">s2</option>
        <option value="s3">s3</option>
    </select>
</div>
<div id="result"></div>

.toggle {
    display:none;
}

$('#foo').on('change', function(){
    var val = $(this).val();
    $('.toggle').hide();
    $('#'+val).show();
});

<div id="example">
    <select id="foo">
        <option value="">lets make another</option>
        <option value="">Demographic</option>
        <option value="">Crime</option>
        <option value="">School</option>
    </select>
 </div>
 <div id="result">
     <select id="foo">
        <option value="">Pick a site</option>
        <option value="">Demographic</option>
        <option value="">Crime</option>
        <option value="">School</option>
    </select>
 </div>

$(function() {
    $("#result").hide();
    $("#foo").click(function() {
        $("#result").show();
    });
});