Ändern Sie den Zahlenwert bei Auswahl einer anderen Option in der Auswahlbox

Question

Sie möchten einfach die Werte meiner Eingabe-Typ-Nummer ändern, indem Sie eine andere Option als die Auswahl-Box auswählen.

Ich kann anwenden, wenn sonst dann tun, aber ich möchte eine weniger komplexe und wenige Zeilen Code, der leicht funktioniert. Zum Beispiel: Wenn ich A, B, C wähle, dann ist der Wert der Eingabe "A" selbe wenn ich a, b, c wähle, dann ist der Wert der Eingabe "a". Grundsätzlich möchte ich ihre Initialen nur in Eingabetypnummer

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

$("#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 2

Try this:

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

Answer 3

Sie können den Code-Schnipsel ausführen und die Werte in console.log überprüfen, aber die Werte werden nicht in der input widerspiegeln, da Sie seine definiert haben Typ als 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" />