Question

我试图在有人点击选择表单中的某个选项时创建一个页面，然后另一个选择表单出现，而不必刷新页面。我知道你使用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>

但是怎么回事？

Answer 1

正如@Goose在评论中所说，您可以隐藏选择框并根据显示的选项选项的值显示它们，而不是使用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

Answer 2

如果您的内容相当静态，我会使用以下不会调用其他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();
    });
});

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

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

2 个答案:

HTML

CSS

JS