Question

This is probably something quite easy to resolve, however, I am having some difficulties finding out the correct answer.

Essentially, I have a jQuery slider that I am using. Each time the slider is changed, I would like to update a <span>, based on the changing of a <select> box.

To see the code in action, please visit http://jsbin.com/etusu/edit

As you will see, the <select> box updates fine with each slide, but the <span> updates only once. I would like the to update just as often as the <select>, because eventually, I will hide the <select> box. Any help on this would be greatly appreciated.

Answer 1

You’re fetching the time text only once, here:

var hour_value = $("#hour :selected").text();

and using that variable to set the text:

$(".time_viewer").text(hour_value);

---

Instead you need to fetch the value every time, since the :selected option changes (and that original variable won’t update), like this

$(".time_viewer").text($("#hour :selected").text());

Here’s the updated/working version.