Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

General Discussion

Posted by William J. Terrell
William J. Terrell
17,403 Points

Using jQuery for a Select Menu

It's not related directly to any of the tutorials, but I wanted to see if someone might be able to help me figure something out.

The page I am working on has the following code:

<h4>Archived News Clippings:</h4>
<div class="loop-12 archives">
<div class="loop-6"><select name="archived_clippings" onchange="window.location.href=this.value;">
<option value="/media_relations/clippings.html">Please Select</option>
<option value="/media_relations/2007_clippings.html">2007</option>
<option value="/media_relations/2008_clippings.html">2008</option>
<option value="/media_relations/2009_clippings.html">2009</option>
<option value="/media_relations/2010_clippings.html">2010</option>
<option value="/media_relations/2011_clippings.html">2011</option>
<option value="/media_relations/2012_clippings.html">2012</option>
<option value="/media_relations/2013_clippings.html">2013</option>
<option value="/media_relations/2014_clippings.html">2014</option>
</select></div>
<div class="loop-6"></div>
</div>

It is a select menu that links to other pages in a News Clipping archive. The only thing, though, is that this menu is on the main Clippings page.

I would like for it to be on all of the pages in the archive; but I don't want to have to copy the whole thing to each page individually and set the first value for each page so that it will reload that particular page if no other value is selected.

I was wondering if there would be something I could set for the value of the Please Select option, so that it would either do nothing, or just reload the current page.

Something like...

<option value="this.page">

Or...

<option value="null">

??

Thanks!

Ron McCranie
Ron McCranie
7,837 Points

I made a minor adjustment to your post so the code hi-lighting would format properly.

2 Answers

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

This might work.

<h4>Archived News Clippings:</h4>
<div class="loop-12 archives">
<div class="loop-6"><select name="archived_clippings" onchange="window.location.href=this.value;">
<option value="?">Please Select</option>
<option value="/media_relations/2007_clippings.html">2007</option>
<option value="/media_relations/2008_clippings.html">2008</option>
<option value="/media_relations/2009_clippings.html">2009</option>
<option value="/media_relations/2010_clippings.html">2010</option>
<option value="/media_relations/2011_clippings.html">2011</option>
<option value="/media_relations/2012_clippings.html">2012</option>
<option value="/media_relations/2013_clippings.html">2013</option>
<option value="/media_relations/2014_clippings.html">2014</option>
</select></div>
<div class="loop-6"></div>
</div>
William J. Terrell
William J. Terrell
17,403 Points

I deleted the "Please Select", along with the value for it (if no value was designated, it would use the text "Please Select" for some reason). Just left it as

<option></option>

That seems to make it just reload the page, but I haven't tried it on the other ones just yet.

I wrote some jQuery to see if I could just build it in a .js file and apply it to the pages; but it doesn't show up. The code is as follows:

$( ".archives" ).append( "
            <h4>Archived News Clippings:</h4>
            <div class="loop-12 archives">
            <div class="loop-6"><select name="archived_clippings" onchange="window.location.href=this.value;">
            <option></option>
            <option value="/media_relations/2007_clippings.html">2007</option>
            <option value="/media_relations/2008_clippings.html">2008</option>
            <option value="/media_relations/2009_clippings.html">2009</option>
            <option value="/media_relations/2010_clippings.html">2010</option>
            <option value="/media_relations/2011_clippings.html">2011</option>
            <option value="/media_relations/2012_clippings.html">2012</option>
            <option value="/media_relations/2013_clippings.html">2013</option>
            <option value="/media_relations/2014_clippings.html">2014</option>
            </select></div>
            <div class="loop-6"></div>
            </div>
    " );

And the HTML I put in the page...

<script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="/render/file.act?path=/js/archive_menu.js" type="text/javascript"></script>

(We're using a CMS, so it adds in the "/render/file.act...")

William J. Terrell
William J. Terrell
17,403 Points

(Thanks for adding that bit so that my code would show properly, by the way. I'm still very new to the comments on here)

William J. Terrell
William J. Terrell
17,403 Points
William J. Terrell
William J. Terrell
17,403 Points

I think we might have it sorted - for one, I was trying to put the JavaScript into a div that I hadn't defined on the page (had it defined in the JavaScript itself); and then there were some syntax errors (some involving the quotation marks, etc.), and I was adding it inline when there was already an include for the entire site's JS library at the bottom (so it was running before what it needed to run had loaded; if that makes any sense.)

We don't learn anything if we don't break anything, right? :P

Thanks though! :)

Here's the finished code:

    // Clipping Archives for Media Relations

$(document).ready(function() {

  $( ".archives" ).append( '
<h4>Archived News Clippings:</h4> \

<div class="loop-12"> \

    <div class="loop-6">
        <select name="archived_clippings" onchange="window.location.href=this.value;"> \

            <option></option> \

            <option value="/media_relations/2007_clippings.html">2007</option> \

            <option value="/media_relations/2008_clippings.html">2008</option> \

            <option value="/media_relations/2009_clippings.html">2009</option> \

            <option value="/media_relations/2010_clippings.html">2010</option> \

            <option value="/media_relations/2011_clippings.html">2011</option> \

            <option value="/media_relations/2012_clippings.html">2012</option> \

            <option value="/media_relations/2013_clippings.html">2013</option> \

            <option value="/media_relations/2014_clippings.html">2014</option> \

        </select>
    </div> \

    <div class="loop-6"></div> \

</div>' );  
});