Question

I try to load in content to a div in Intex based on choice in a select box. It dont work so something is wrong. I made an example of four pages to show basicly how it is:

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

In Index I have a select element with ID “selectchoice”:

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

I also have a div in Index with id “get_content”:

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

When I change the select element to option 1 or 2 or 3 I want to load one.html or two.html or three.html into the div get_content.

Then I place this code in the header if Index.html, after the jQuery-file link.

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

And then I run the site (on a server with other load-scripts thats works on the same site), but its not working. What is wrong? :/

Kinda new to scrips and programming so do not be suprised if there is any standard error.

Anybody finding the error?

Answer 1

Your select tag is not closed properly. Add " after your id to close the id attribute.
It’ll then look like this:

<select id="selectchoice"> …

Try replacing your javascript with this:

$(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(...) makes the code execute once the page is loaded, which means it’ll bind the function to the onChange event right when you will load the page, while before it wouldn’t execute the script since it wasn’t called anywhere.

This code respects most of the Object Calisthenics practices. I cut myself some loose since it is only a small snippet.