Question

我尝试根据选择框中的选项将内容加载到Intex中的div。它不起作用，所以有些不对劲。我做了四个页面的例子来基本显示它是怎么回事：

Index.html
one.html
two.html
three.html

在索引中，我有一个ID为“selectchoice”的select元素：

<select id="selectchoice>
<option>Select a choice</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>

我的索引中还有一个id为“get_content”的div：

<div id="get_content"></div>

当我将select元素更改为选项1或2或3时，我想将one.html或two.html或three.html加载到div get_content中。

然后我将此代码放在标题中，如果是index.html，则在jQuery文件链接之后。

<script>
$("#selectchoice").change(function(){
    $("#get_content").load("");
    $("#get_content").load("one.html");
    $("#get_content").load("two.html");
    $("#get_content").load("three.html");
});

然后我运行该站点（在具有在同一站点上工作的其他加载脚本的服务器上），但它不起作用。怎么了？：/

有点新的编程和编程，所以如果有任何标准错误，请不要惊讶。

有人发现错误吗？

Answer 1

您的select标记未正确关闭。在您的ID后添加"以关闭id属性。它看起来像这样：

<select id="selectchoice"> ...

尝试用以下内容替换您的javascript：

$(document).ready(function (){
    $("#selectchoice").change(function(){

        var selectedOption = $('#selectchoice :selected').val();
        $containerDiv = $('#get_content');
        $containerDiv.html("");

        switch (selectedOption)
        {
            case "1": 
                $containerDiv.load( "one.html" );
                break;

            case "2":
                $containerDiv.load( "two.html" );
                break;

            case "3":
                $containerDiv.load( "three.html" );
                break;

            default:
                $containerDiv.load( "whatever.html" );
                break;
       }

        return true;
    });
});

$(document).ready(...)使代码在页面加载后执行，这意味着它将在您加载页面时将函数绑定到onChange事件，而在它不执行脚本之前它是无处可去。

此代码尊重大多数Object Calisthenics practices。因为它只是一个小片段，所以我自己也松了一口气。

Answer 2

$(function(){ // do it after page load
   $("#selectchoice").change(function(e){
     if(e.target.value=="select a choice"){ // you can use switch instead of if
       $("#get_content").load("");
     }else if(e.target.value=="1"){
       $("#get_content").load("one.html");
     }
     //....
});

从同一网站的外部页面加载div中的内容

2 个答案: