根据选择选项标签更改输入值

Question

I've searched for a solution to this but have come up short; it's a bit different to the usual solution.

I'm building a PHP Graph system, and as part of its setup features I need to be able to submit to 2 columns in a MySQL database using 1 "select" input. The user sees an eye friendly drop-down, selects an eye-friendly option, and the 2 required values are added. The one value submitted needs to refer to a sql-formatted column name (such as col_1) and the other value needs to be the eye-friendly label for it ("Column 1"). So for the following example:

<select name="col_name" id="col_name">
        <option value="first_name">First Name</option>
        <option value="middle_name">Middle Name</option>
        <option value="second_name">Second Name</option>
</select>

<input type="hidden" name="col_title"></input>

It's easy enough to automatically enter the selected value into the hidden inout, but I need the label (if that's its name) of the selected option to automatically enter into the hidden input, #col_title. So not the selected value (EG middle_name), but the label (Middle Name), which I can't find much on.

Would anyone be able to help? Thank you!

Answer 1

Try this

HTML:

<select name="col_name" id="col_name">
    <option value="first_name">First Name</option>
    <option value="middle_name">Middle Name</option>
    <option value="second_name">Second Name</option>
</select>

<input type="hidden" name="col_title" id="textbox" />

jQuery:

// init
$('#textbox').val($('#col_name option:selected').text());
//on selecting
$('#col_name').on('change', function() {
    $('#textbox').val($(this).find('option:selected').text());
});

Working example: https://jsfiddle.net/a3qk1s7g/