2

選択ボックスでの選択に基づいて、Intex の div にコンテンツをロードしようとしています。うまくいかないので、何かが間違っています。基本的にどのようになっているのかを示すために、4 つのページの例を作成しました。

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>

また、インデックスに「get_content」という ID の 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");
});

次に、サイトを実行します (同じサイトで動作する他のロード スクリプトを含むサーバー上で) が、動作しません。なにが問題ですか？:/

scrips とプログラミングは初めてなので、標準エラーが発生しても驚かないでください。

エラーを見つけた人はいますか？

4

3 に答える 3

3

最初に select タグの 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 に答える