The Official Blog of Patcoola

Im just a dude watching over my parents,
and trying to make cartoons and video games from home.

JS_Smart: Select Case Study

, By Patcoola

The Smart Java Script library provides useful features to reduce the need for programming your website. In this case study I’ll demonstrate a common issue with the select element for page selection. Many webpages use the select element to provide a list of pages for the article. Selecting and going to the page address is not easy, especially for content creators using a content management system.

Using the select element we have two options to create a link behavior. Option one, we code the behavior into the website’s theme. Option two, we code the behavior into the element has an inline event. Either way this requires a level of coding. Smart allows designs and content creators to us this functionality with no coding at all by adding an attribute to the select element.

Advertisement

Donate Now!

This might not be the best time, but making a blog is not easy. Would you consider donating?


Before:

<select onchange=”location = this.options[this.selectedIndex].value;”>

<option value=”../page/1/” selected=”selected”>Page 1: Introduction</option>
<option value=”../page/2/”>Page 2: Configuration</option>
<option value=”../page/3/”>Page 3: Performance</option>
<option value=”../page/4/”>Page 4: Benchmarks</option>
<option value=”../page/5/”>Page 5: Conclusion</option>

</select>

After:

<select js_select=”href”>

<option value=”../page/1/” selected=”selected”>Page 1: Introduction</option>
<option value=”../page/2/”>Page 2: Configuration</option>
<option value=”../page/3/”>Page 3: Performance</option>
<option value=”../page/4/”>Page 4: Benchmarks</option>
<option value=”../page/5/”>Page 5: Conclusion</option>

</select>

js_select=”href”

This attribute not only turns your select element into a link, but also automatically selects the page option when loaded by checking the options to the browser’s URL. If your URL is “page 2”, then when the page is loaded, the “page 2” option is selected.

 

Advertisement

Donate Now!

This might not be the best time, but making a blog is not easy. Would you consider donating?


 

Post Meta

Share Post

 

Comments: Write Comment

Be the first to write a comment.


Leave a Comment


All comments are reviewed before publishing. Comments must be related to the page topic, must not be spam, and must comply with the criminal code of Canada.