根据输入框选项选择下拉选项

Question

I have the following box which is just a text box for a month in number for. ie January is 01

<input type="text" name="ccnum" id="em">

I need a way for my dropdown box to select the month name, so if 01 is in the text box, January would be selected, and so on.

<select class="form-dropdown validate[required] cc_exp_month" name="q6_invoiceAmount[cc_exp_month]" id="input_6_cc_exp_month" data-component="cc_exp_month">
  <option> </option> 
  <option value="January"> January </option> 
  <option value="February"> February </option> 
  <option value="March"> March </option> 
  <option value="April"> April </option> 
  <option value="May"> May </option>
  <option value="June"> June </option> 
  <option value="July"> July </option> 
  <option value="August"> August </option> 
  <option value="September"> September </option> 
  <option value="October"> October </option> 
  <option value="November"> November </option> 
  <option value="December"> December </option> 
</select>

Tried this code below but that's specific to same type in both boxes

$(function() {
    $('input[name=selectNow]').on('click', function(event) {
        selectByText($.trim($('input[name=selText]').val()));
    }).click();

    $('input[name=selText]').on('keyup', function() {
        selectByText($.trim($(this).val()));
    });
});

function selectByText(txt) {
    $('#MySelect option')
        .filter(function() { 
            return $.trim($(this).text()) == txt; 
        })
        .attr('selected', true);
}

Answer 1

Use the number of the each month as options value and bind event listener to the input .

 window.onload = function() { var box = document.getElementById('em'), select = document.getElementById('input_6_cc_exp_month'); box.addEventListener('keyup', function() { select.value = this.value; }); } 

 <input type="text" name="ccnum" id="em" /> <select class="form-dropdown validate[required] cc_exp_month" name="q6_invoiceAmount[cc_exp_month]" id="input_6_cc_exp_month" data-component="cc_exp_month"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> 

Answer 2

Because your month options have index ranging from 1 to 12 it's enough to test the input value against NaN or a value outside the range.

 $('input[name=ccnum]').on('input', function(e) { var idx = +this.value; // get current input value as number if (!isNaN(idx)) { // if number if (idx > 12) { // if greater than 12 idx = 12; } if (idx < 1) { // if smaller than 1 idx = 1; } this.value = idx; // select the corresponding option by index $('#input_6_cc_exp_month option').eq(idx).prop('selected', true); } else { // if NaN remove non numeric values this.value = this.value.replace(/[^\\d]*/g, ''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="text" name="ccnum" id="em"> <select class="form-dropdown validate[required] cc_exp_month" name="q6_invoiceAmount[cc_exp_month]" id="input_6_cc_exp_month" data-component="cc_exp_month"> <option> </option> <option value="January"> January </option> <option value="February"> February </option> <option value="March"> March </option> <option value="April"> April </option> <option value="May"> May </option> <option value="June"> June </option> <option value="July"> July </option> <option value="August"> August </option> <option value="September"> September </option> <option value="October"> October </option> <option value="November"> November </option> <option value="December"> December </option> </select>