Drop Down to Set Initialize Value using Jquery

Question

I try to set the default values on all fields using drop down. For example: Let consider Drop down there is of three options like theme1, theme2 and theme 3 and I have 5 input fields. In the five input fields have appropriate id .

If i select the theme1 it initialize the value to the appropriate 5 input field.(I am not sure is there is a way to assign the values to the array)

Theme1 contatin

input1 => "hi";
input2 => "how";
input3 =>"are";
input4 =>"you";

If i select the theme1 in drop down then add the values as i defined in array(If it is feasible) Theme2 contatin

input1 => "glad";
input2 => "to";
input3 =>"meet";
input4 =>"you";

If i select the theme2 it initialize the value to the appropriate 5 input field.(This value is differ with theme1)

$('select').on('change', function() {
    $("select option:selected").each(function () {
            $('#price').val('$' + $(this).attr('value'));
    });

});

Right now i mentioned with value. But is there is a way to call the function instead of Can anyone Propose me to do this with set of initialize value to the one option(theme1) using array. Here is my fiddle

Answer 1

Working DEMO

Try this

code

$('select').on('change', function () {
    var data = $(this).val().split(' ');
    var i = 0;
    $('input').each(function () {

        $(this).val(data[i]);
        i++;

    });
});

html

<select>
    <option>Select an item</option>
    <option value="Hello how are you">Item 1</option>
    <option value="Glad to meet you">Item 2</option>
    <option value="3">Item 3</option>
</select>
<input type="text" id="price">
<input type="text" id="another_price">
<input type="text">
<input type="text">