Question

我有以下方框，它只是一个月份的文本框。即1月是01

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

我需要一种方法让我的下拉框选择月份名称，所以如果01在文本框中，则选择1月，依此类推。

<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>

尝试使用以下代码，但这两个框中的相同类型

$(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

将每个月的number用作options值，并将事件监听器绑定到input。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

因为您的月份选项的索引范围为1到12，所以足以根据NaN或超出范围的值测试输入值。

＆＃13;

$('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, '');
    }
});

＆＃13;

<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>

＆＃13;

根据输入框选项

2 个答案: