Jquery split function not working on setting numeric option value

Question

I am trying to use jquery split function to set the option value but it is not working. I must be missing something really simple (new to programming!).

$("#product").on('change keyup', function() {
var value = $('option:selected', this).text();
$("#small").val(value.split('-')[1]);
$("#medium").val(value.split('-')[2]);
$("#large").val(value.split('-')[3]);
}).keyup();​

<select id="product">
    <option value="ronald mcdonald-100-200-300">ronald</option>
    <option value="the hamburglar-150-250-350">ronald</option>
</select>
<select>
    <option value="0" id="small">Small</option>
    <option value="0" id="medium">Medium</option>
    <option value="0" id="large">Large</option>
</select>

​Also on jsfiddle for your viewing pleasure: Demo

Answer 1

var value = $('option:selected', this).attr('value'); // not .text(), if you use text
                                                      // it will give you ronald as return

DEMO

or

var value = $(this).val(); // also return you the selected option value

DEMO

Answer 2

Live Demo

Replace

var value = $('option:selected', this).text();

with

var value = $('option:selected', this).val();