Question

我有一个HTML表单，其中包含IFSC字段和银行名称选择字段，如here所示。

IFSC码由11位数字组成，而前四位数字是银行标识符。因此，如果有人在输入字段中输入前四位数字，则select字段应自动显示该银行名称。

我的代码如下：

<input name="ifsccode" type="text" maxlength="11" class="form-control" placeholder="IFSC&#32;Code" required/>


<select name="bankname" class="form-control" required>
  <option selected="selected" value="0">--Select --</option>
  <option value="1">ALLAHABAD BANK </option>
  <option value="2">ANDHRA BANK</option>
  <option value="3">AXIS BANK</option>
  <option value="29">STATE BANK OF INDIA</option>
  <option value="4">BANK OF BARODA</option>
  <option value="29">UCO BANK</option>
  <option value="29">UNION BANK OF INDIA</option>
  <option value="5">BANK OF INDIA</option>
  <option value="20">BANDHAN BANK LIMITED</option>
  <option value="7">CANARA BANK</option>
  <option value="32">GRAMIN VIKASH BANK</option>
  <option value="8">CORPORATION BANK</option>
  <option value="9">INDIAN BANK</option>
  <option value="10">INDIAN OVERSEAS BANK</option>
  <option value="11">ORIENTAL BANK OF COMMERCE</option>
  <option value="12">PUNJAB AND SIND BANK</option>
  <option value="13">PUNJAB NATIONAL BANK</option>
  <option value="14">RESERVE BANK OF INDIA</option>
  <option value="15">SOUTH INDIAN BANK</option>
  <option value="16">UNITED BANK OF INDIA</option>
  <option value="17">CENTRAL BANK OF INDIA</option>
  <option value="18">VIJAYA BANK</option>
  <option value="19">DENA BANK</option>
  <option value="21">BHARATIYA MAHILA BANK LIMITED</option>
  <option value="22">FEDERAL BANK LTD </option>
  <option value="23">HDFC BANK LTD</option>
  <option value="24">ICICI BANK LTD</option>
  <option value="25">IDBI BANK LTD</option>
  <option value="66">PAYTM BANK</option>
  <option value="29">FINO PAYMENT BANK</option>
  <option value="26">INDUSIND BANK LTD</option>
  <option value="27">KARNATAKA BANK LTD</option>
  <option value="28">KOTAK MAHINDRA BANK</option>
  <option value="30">YES BANK LTD</option>
  <option value="31">SYNDICATE BANK</option>
  <option value="5">BANK OF INDIA</option>
  <option value="6">BANK OF MAHARASHTRA</option>
</select>

谢谢。

Answer 1

尝试一下。

技巧是，您需要在选项中将ifsc代码设置为值。

var opsArr = [];

$('#bankname > option').each((index, ele) => {
    opsArr.push(ele.value);
});

function myFunction() {
    var x = document.getElementById("ifsccode").value;
    if (x && x.length >= 4) {
        var ifsc = x.substr(0, 4);
        ifsc = opsArr.find(key => ifsc == key);
        $('select').val((ifsc) ? ifsc : opsArr[0]);
    } else if (x.length < 4) {
        $('select').val(opsArr[0]);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
Assume IFSC codes BAN19870001, BAN29870001, BAN39870001. Try below.
</p>


<input id="ifsccode" name="ifsccode" type="text" maxlength="11" class="form-control" placeholder="IFSC Code" oninput="myFunction()" required/>

    <select id="bankname" name="bankname" class="form-control" required>
        <option selected="selected" value="BANK">--Select --</option>
        <option value="BAN1">BANK NAME-1</option>
        <option value="BAN2">BANK NAME-2</option>
        <option value="BAN3">BANK NAME-3</option>
        <option value="BAN4">BANK NAME-4</option>
    </select>

根据文本字段中的输入选择下拉列表值

1 个答案: