Question

I have a menu such as this:

<select>
<option value="21">option a</option>
<option value="13">option b</option>
<option value="21">option c</option>
</select>

Depending on what option is being selected I need get the corresponding value to use elsewhere in links and images. (it also needs to pull from the default option before it is clicked)

<img src="mysite.com/images/[valuegoeshere].jpg">
<a href="mysite.com/pages/[valuegoeshere].jpg">

There are several unique versions of these drop downs on page.

What is the easiest way to do this?

Answer 1

Use the following on $(document).ready():

function update(val) {
  $("img").attr("src", "mysite.com/images/" + val + ".jpg");
  $("a").attr("href", "mysite.com/pages/" + val + ".jpg");
}

var defaultVal = $("select").change(function () {
  update(this.value); // update <img> and <a> with the newly selected value
}).val();

update(defaultVal); // update <img> and <a> with the default value

DEMO.