在选择框中选择其他选项时更改数字值

Question

Simply want to change values of my input type number on the selection of a different option from the select box.

I can apply if else then do this but I want a less complex and few lines code which works easily. For eg: If I choose A, B, C then the value of input will be "A" same if I choose a,b,c then the value of input will be "a", Basically I want their initials only in input type number.

HTML:

<select name="number_select" id="number_select" class="number_select div_height font_size" accesskey="n">
<option value="1" selected="selected">1, 2, 3, ...</option>
<option value="2">a, b, c, ...</option>
<option value="3">A, B, C, ...</option>
<option value="4">i, ii, iii, ...</option>
<option value="4">I, II, III, ...</option>
</select>
<input type="number" name="start_number" id="start_number" class="start_number div_border font_size" value="1" min="1" max="9" accesskey="s"/>

Answer 1

You can run the code snippet and check the values in console.log but the values won't reflect in the input since you have defined its type as number

 $("#number_select").change(function() { var selectedValue = $(this).find("option:selected").text(); console.log("Initials: " + selectedValue[0]); $("#start_number").val(selectedValue[0]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="number_select" id="number_select" class="number_select div_height font_size" accesskey="n"> <option value="1" selected="selected">1, 2, 3, ...</option> <option value="2">a, b, c, ...</option> <option value="3">A, B, C, ...</option> <option value="4">i, ii, iii, ...</option> <option value="4">I, II, III, ...</option> </select> <input type="number" name="start_number" id="start_number" class="start_number div_border font_size" value="1" min="1" max="9" accesskey="s" /> 

Answer 2

 $("#number_select").change(function() { var option = $(this).find("option:selected").text(); if ($.isNumeric( option[0] )) $("#start_number").attr("type", "number"); else $("#start_number").attr("type", "text"); $("#start_number").val(option[0]); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="number_select" id="number_select" class="number_select div_height font_size" accesskey="n"> <option value="1" selected="selected">1, 2, 3, ...</option> <option value="2">a, b, c, ...</option> <option value="3">A, B, C, ...</option> <option value="4">i, ii, iii, ...</option> <option value="4">I, II, III, ...</option> </select> <input type="number" name="start_number" id="start_number" class="start_number div_border font_size" value="1" min="1" max="9" accesskey="s" /> 

Answer 3

Try this:

$('#number_select').change(() => {
    $('#start_number').val($('#number_select').val());
});