Select control and DOM

Question

I am trying to create a JS function that will take a value from a dropdownlist, add it as a query string to a http link and then open that link. How to go about that?

Let's say this is the <select>

<select>
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="mercedes">Mercedes</option>
   <option value="audi">Audi</option>
 </select>

How would I use that in DOM to access the value of the selected item on the DDL?

function openlink(link) {
            window.open(link + "SELECTED_ITEM_GOES_HERE");
        }

What is the syntax for SELECTED_ITEM_GOES_HERE?

Do you require it onchange ? – Umesh Patil Dec 10 '12 at 13:00 — Umesh Patil, Dec 10 '12 at 13:00

score 2 · Accepted Answer · edited May 23 '17 at 11:48

2

You need this: Get selected value in dropdown list using JavaScript?

And this: How to set querystring with Javascript

To produce this:

<select id="test">
   <option>Volvo</option>
   <option>Saab</option>
   <option>Mercedes</option>
   <option>Audi</option>
</select>

<script>
var ddl = document.getElementById('test');
ddl.onchange = function(){
    window.location = 'https://www.google.com.au/search?hl=en&q=' + ddl.options[ddl.selectedIndex].text;
};
</script>

edited May 23 '17 at 11:48

Community

1
1

answered Dec 10 '12 at 13:12

gkiely

2,987
1
23
37

hanks. that works but only for odd items on the list, so if the list has 1,2,3,4,5 it would only change when selecting 1,3 or 5. why is that – sd_dracula Dec 10 '12 at 13:44
I did have to put the script above in another function and then call it with the "onchanged" in the `select` definition as having the script in the head and the select below causes an error due to order of loading – sd_dracula Dec 10 '12 at 13:51

Select control and DOM

1 Answers1