如何在不刷新页面的情况下添加带有选择标签的内容（AJAX）答案

【问题标题】：How to add content with select tag without refreshing the page(AJAX)如何在不刷新页面的情况下添加带有选择标签的内容（AJAX）
【发布时间】：2014-09-20 06:04:20
【问题描述】：

当有人单击选择表单中的选项时，我正在尝试创建一个页面，然后出现另一个选择表单，然后另一个选择表单出现，而无需刷新页面。我知道您使用 AJAX 不刷新，但我的代码在尝试时无法正常工作。

HTML

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

javascript(AJAX)

$(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>

但是怎么了？？

【问题讨论】：

button.switch 在哪里？这里真的需要 Ajax 吗？看来这可以用所有本地代码来完成。
是的，如果您不需要从服务器获取任何其他数据，为什么不绑定您的列表并使用 JS 显示/过滤内容？
绑定列表是什么意思？ @鹅
绑定我的意思是构建包含您的数据的select 列表。构建每个列表，隐藏未使用的列表。当用户在第一个列表中进行选择时，显示第二个列表并根据需要过滤选项等。

标签： javascript jquery ajax html

【解决方案1】：

如果您的内容是相当静态的，我会使用以下不调用额外 http 调用的代码：

HTML：

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

JS：

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

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

【讨论】：

【解决方案2】：

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

HTML

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

CSS

.toggle {
    display:none;
}

JS

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

Fiddle

【讨论】：

当我单击其中一个选项时，它会将我带到“找不到对象的 URL”页面？ @LorenPosen
哪个选项？ @CamTheArtist