You are here

Scroll-to and Auto-select Dropdown Option

Back to Wiki

This feature allows users to create a hyperlink that will scroll to a dropdown element (select tag), either on the current page or another page, and optionally auto-select an option element within it.

The select tag MUST have a fixed id attribute AND the following querystring paramters MUST be provided:

  • autoselect=1           // This must always be the number one.
  • elid=select-tag-id     // This is the id attribute of the select element
  • opVal=value-of-option  // This is the value of the option in which to auto-select

Instructions to Create the URL

Use these steps to create the url for linking to and auto-selecting an option from the dropdown:

  1. Find the page that holds the dropdown you want to link and scroll to. Copy the url from the address bar of your web browser.
    Ex: https://www.csn.edu/cte
  2. Find and copy the id attribute of the dropdown element. You will need to know some html and have knowledge of what an id attribute is on an html element. If you are unsure, contact Web Services for assistance.
  3. (Optional) - Find and copy the value attribute of the option in the dropdown. Again, you will need some html knowledge to find this. If this is not provided, the link will scroll to the dropdown element but no auto-select will occur.
  4. Combine all values from above steps. Use any text editor for this, such as Notepad or MS Word and follow these steps:
    1. Paste in the URL copied from step 1.
    2. Type in the question mark character "?" after the url.
    3. Type in "autoselect=1" property after the question mark. This tells the system you are using this feature.
    4. Type in an ampersand "&". This character is used to separate each key/value pair in a url.
    5. Type in "elid=" along with the id of the select element from step 2.
      ******* If you are not auto-selecting an option, you can stop here. *********
    6. Type in another ampersand "&".
    7. Type in "opVal=" along with the value copied from step 3 above.

Here is an example of what the url might look like: 
https://www.csn.edu/cte?autoselect=1&elid=hs-programs&opVal=architectura...