CODEWITHSUNDEEP
javascript
TSCAmerica.com
TSCAmerica.com

Reputation: 5377

Tough Javascript Question : Read DropDown Values and Show it as clickable links in Javascript

enter image description here My Drop down HTML code looks like below, 

<select onchange="if (this.value != '') {Add_Search_Param('f-' + this.value.split('|')[1], this.value.split('|')[0]); Refine();}"><option value="">Find by Model Number</option><option value="45|V709">V709 (6)</option><option value="52|V714">V714 (4)</option></select>

Currently the above HTML code displays a drop down which shows the following

Find by Model Number, V709 (6), V714 (4).

What i need done is read the Drop Down, display in the same page but instead of drop down make it clickable links, something like below.

<a href="V709 (6).htm">V709 (6)</a>

So is this possible ?

Upvotes: 0

Views: 421

Answers (1)

Billy Moon
Billy Moon

Reputation: 58531

html:

<div id="links"></div>

jQuery:

$('option').each(function(){
    $('#links')
    .append(
        $('<a />')
        .attr({ href:$(this).text()+'.htm' })
        .html( $(this).text()+'<br>' )
    )
})

Working demo: http://jsfiddle.net/TJV4K/

Notes: This requires jQuery javascript library, but any other decent library can be used in a very similar way.

You need to give an id to the select you are targeting and modify the selector in the javascript code so it picks the right option tags - as it stands, it will pick all option tags on the page.

Upvotes: 1

Related Questions