jquery - 如何使用 .selectmenu jquery ui 自动填充信用卡数据?
问题描述
我有付款页面。使用信用卡 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>
使用
$( "选择" ).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>
解决方案
您可以设置value
初始化之前或之后。如果之后这样做,则必须使用refresh
方法。
$(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>
推荐阅读
- angular - select2 angular2+ 将第一个值设置为默认值
- css - 如何删除角度应用程序中的默认边距?
- python - 训练神经网络时出现 ResourceExhaustedError 错误
- html - 最后一个元素的边距底部不会拉伸其容器
- ruby - 如何返回(到交互式 Ruby Shell)调用方法时运行的代码
- r - 将行从 0 折叠到 0
- emacs - Emacs 不能渲染 4 字节的 UTF-8?
- javascript - Javascript 像 Java 8 上的“Promise.all”(可能带有 lambdas)
- javascript - 在数组中显示偶数和奇数
- java - 我正在尝试在实际月份 1 之前获取星期一的日期