This tutorial will cover how to retrieve information from <select> groups of <option> tags, which create pull-down options and then apply that information to select a range if items from a list.

This tutorial will use the .val(), .hide(), .show(), .slice(), .change() and .css() methods. It will also use JavaScript parseInt() command.

 

jquery-blank.html

Create a new document: tutorial-8.html

We will start out with the basic jQuery document that was created in Tutorial 1.

Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-8.html.


Create the HTML elements

Inside of the <body>...</body> tags we are going to create a list of items, some <option> selectors and a button to start the process.

Type the following into your open document:

<body>
<div id="container">
    <h4>jQuery .select(). method:<br/>Change artists name to red.</h4>
    <ol id="myList">
        <li>Monet</li>
        <li>Renoir</li>
        <li>Degas</li>
        <li>C&#233;zanne</li>
        <li>Hale</li>
        <li>Pissarro</li>
        <li>Van Gogh</li>
    </ol><div id="selectors">
<p>Start at:
    <select name="first">
        <option value="Pick">Pick</option>
        <option value="0">1</option>
        <option value="1">2</option>
        <option value="2">3</option>
        <option value="3">4</option>
        <option value="4">5</option>
        <option value="5">6</option>
        <option value="6">7</option>
    </select>
</p>

<p id="endItem">
Through:
    <select name="second">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
    </select>
<button>GO</button>
</p>
</div>
<br/>
<input type="button" value="RELOAD" onClick="document.location.reload(true)">
</div><!-- END container -->
</body>


Style the HTML element

Let's add some styling to create the container to hold it all, the box for the visitor to click and then place the balloons out of sight. Above the closing </head> tag, you will see the <style type="text/css">...</style> section. Add the following:

<style type="text/css">
   body{background: url(../sitegraphics/jqz-demo.jpg); font-family: sans-serif;}
    #container {width: 400px; margin: 0 auto; background: #ffffff;padding: 10px;}
    p {padding: 8px; cursor: pointer; background: #ccc;display: inline;}
    input{margin-top: 20px;}
    button {margin-left: 15px;}
</style>


Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

<script type="text/javascript">
    $(document).ready(function(){
        $("[name=first]").val("Pick");
        $("[name=second]").val("0");
        $("#endItem").hide();
        $("[name=first]").change(function(){
            var first = $("[name=first]").val();
            var end = parseInt(first) + 1;
            $("[name=second] option").slice(0, end).remove();
            $("#endItem").show();
        }); // end change() function

        $("button").click(function(){
            var first = $("[name=first]").val();
            var second = $("[name=second]").val();
            $("#myList li").slice(first,second).css("color","red");
            $("#selectors").hide();
        });  // end click function   
    });  // End document.ready()
</script>


Let's go thru the script step by step:

Try out the demo below to see how the program works. The steps below will make more sense once you see the logic.

$("[name=first]").val("Pick");

this uses .val() to reset the first selector to the "Pick" selector when the screen is refreshed.

$("[name=second]").val("0");

This uses .val() to reset the second selector when the screen is refreshed.

$("#endItem").hide();

This hides the second selector until we are ready for the visitor to make the last selection.

$("[name=first]").change(function(){

This starts a function when the value of the first pull down selector is changed from "Pick" to something else.

var first = $("[name=first]").val();

This retrieves the value that the visitor selected for the first pull down selector, 1, 2, 3...

var end = parseInt(first) + 1;

We will need to remove the options from the second selector so that the visitor cant select items prior to the first item selected. This sets up the end parameter for the next step.

$("[name=second] option").slice(0, end).remove();

Now we use the .slice() method to select all of the <option> elements from <select name="second"> for removal so that they aren't available to the visitor for selection.

$("#endItem").show();

Now we allow the second selector to be seen by the visitor.

}); // end change() function

We need this to close out the .change() function.

$("button").click(function(){

Now we set up a function to begin with the visitor has made his selections and clicks on "Go"

var first = $("[name=first]").val();

Retrieve the value of the first selector

var second = $("[name=second]").val();

Retrieve the value of the second selector

$("#myList li").slice(first,second).css("color","red");

Use these values with the .slice() method along with .css() to modify the selection

$("#selectors").hide();

Hide the selectors so that the visitor does not keep making changes - unless he reloads the page and everything is reset.

});  // end click function   

Close the click function.


Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:

file:///C:/jquery-tutorials/tutorial-8.html

When you open up the document, you should see something like this.