温馨提示:本文翻译自stackoverflow.com,查看原文请点击:其他 - How to autofill credit card data using .selectmenu jquery ui?
drop-down-menu jquery jquery-ui select autofill

其他 - 如何使用.selectmenu jquery ui自动填充信用卡数据?

发布于 2020-04-08 17:29:11

我有付款页面。使用信用卡PAN输入和到期日期选择框(月/年),我使用jquery ui> .selectmenu从选择框修改为下拉菜单

当我从PAN输入中选择已保存的卡时,PAN数据会填充在PAN输入中,但到期数据不会填充在下拉菜单中。仅当我按下每个菜单(月/年)时,才从下拉列表中预先选择所需的值。我的目标是在选择保存的卡时使用Pan永久设置到期日期。我该如何实现呢?

这是我的到期日期月份选择框下拉菜单

<select class="date1" id="Mon" name="Mon" style="display: none;"><option value="01" selected="" id="Mon01">01</option><option value="02" id="Mon02">02</option><option value="03" id="Mon03">03</option><option value="04" id="Mon04">04</option><option value="05" id="Mon05">05</option><option value="06" id="Mon06">06</option><option value="07" id="Mon07">07</option><option value="08" id="Mon08">08</option><option value="09" id="Mon09">09</option><option value="10" id="Mon10">10</option><option value="11" id="Mon11">11</option><option value="12" id="Mon12">12</option></select>

使用

$(“ select”).selectmenu({})

我将选择下拉列表转换为下面的列表

<span tabindex="0" id="Mon-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="Mon-menu" aria-haspopup="true" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget" aria-activedescendant="ui-id-1" aria-labelledby="ui-id-1" aria-disabled="false">
    <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
    <span class="ui-selectmenu-text">01</span>
</span>

查看更多

提问者
David
被浏览
39
Twisty 2020-02-01 01:09

您可以设置value初始化之前或之后。如果这样做之后,则必须使用refreshmethod。

$(function() {
  $("#Mon").selectmenu();
  $("#set-mon").click(function() {
    $("#Mon").val("06").selectmenu("refresh");
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select class="date1" id="Mon" name="Mon">
  <option value="01" id="Mon01">01</option>
  <option value="02" id="Mon02">02</option>
  <option value="03" id="Mon03">03</option>
  <option value="04" id="Mon04">04</option>
  <option value="05" id="Mon05">05</option>
  <option value="06" id="Mon06">06</option>
  <option value="07" id="Mon07">07</option>
  <option value="08" id="Mon08">08</option>
  <option value="09" id="Mon09">09</option>
  <option value="10" id="Mon10">10</option>
  <option value="11" id="Mon11">11</option>
  <option value="12" id="Mon12">12</option>
</select>
<button id="set-mon">Set Month</button>