jQuery Slider, finding value of the selected' when bound to select

Question

I've got a tiny issue that I am trying to work out.

I've put the problem into JSFiddle with their been quite a lot of options in the select html http://jsfiddle.net/dANW8/

here is the JS for the actual slider but it's easier to check the jsfiddle

    $(function () {
        var select = $('#hdd');
        var slider = $("<div id='slider'></div>").insertAfter(select).slider({
            min: 0,
            max: 45,
            range: "true",
            value: select[0].selectedIndex + 1,
            slide: function (event, ui) {
                select[0].selectedIndex = ui.value - 1;
                $("#hddValue").text(ui.value);
            }
        });
    //show start value
    $( "#hddValue" ).html(  $('#slider').slider('value') );
    });

I basically want to output the actual value of the selected item, so instead of outputting the actual index number that goes from 1-45 I want to show that value of it instead.

Anyone got any idea how I can do this?

Thanks in advance for time spent looking,

Phil

Answer 1

You need to use the text of selected option of the select.

Live demo

Change

 $("#hddValue").text(ui.value);

To

  $("#hddValue").text($('#hdd option:selected').text());