Question

Let me preface this with: I am very new to the coding side of things, I come from a design background… but here we go…

I am using the keyup and change jquery to transfer values over to a display image that will be printed (The values are also inserted into the DB).

My problem is the options for my input include both the size and description, but all I want to transfer with keyup/change is the size.

    Cake Type: <select name="Cake" id="cake">
    <option value="5 3/8&#34; Cake Pie" >5 3/8" - Cake Pie</option>
    <option value="5 7/8&#34; Pretzal Pie" >5 7/8" - Pretzal Pie</option>
    <option value="5 1/2&#34; Wing Ding" >5 1/2" - Wing Ding</option>
    <option value="5 1/2&#34; Objectonator" >5 1/2" - Objectonator</option>
    </select>

Currently I use this the keyup and change jquery to transfer the value:

$("#cake").change(function () {
    var value = $(this).val();
    $("#cake_transfer").text(value);
}).keyup();
$("#cake").keyup(function () {
    var value = $(this).val();
    $("#cake_transfer").text(value);
}).keyup();

So is it possible to remove the description and just transfer the size (ie: 5 1/2″)?

Thanks for any help

Answer 1

$("#cake").on('change keyup', function() {
    var value = $('option:selected', this).text();
    $("#cake_transfer").text(value.split('-')[0]);
}).keyup();

DEMO