2

我尝试根据选择框中的选择将内容加载到 Intex 中的 div 中。它不起作用，所以出了点问题。我做了一个四页的例子来基本展示它是如何的：

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

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

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

当我将选择元素更改为选项 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");
});

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

对于脚本和编程来说有点新，所以如果有任何标准错误，不要感到惊讶。

有人发现错误吗？

4

3 回答 3

3

首先应该关闭选择标签的 id 属性，并且应该优化您的 javascript 函数。就像是

<script>
$("#selectchoice").change(function(){
    var page = this.selectedIndex;
    if(page == 1) { 
       $("#get_content").load("one.html");
       return;
    }
    else if(page == 2) {
      $("#get_content").load("two.html");
      return;
   }
   ....  
});
于 2012-12-19T13:50:56.990 回答
0

您的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 实践。我让自己松了一些，因为它只是一个小片段。

于 2012-12-19T13:47:26.153 回答
0 
$(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");
     }
     //....
});
于 2012-12-19T13:50:27.793 回答