我有一个金额下拉列表,其初始选择值为10美元,一个金额文本框,项目要求是用户开始在文本框中输入下拉值应该更改为“ - ”并且用户再一次点击下拉列表,文本框中的值应为空白,并且应删除连字符,请建议如何实现此目的。下面是代码(目前没有编写脚本):
<div class="selectContainer ui-grid-a" id="DD2">
<select class="left" name="card1SelectAmount" data-mini="true" id="giftCardAmount1"
style="width: 30%;padding-left: 20px" onclick="dropDownClicked()">
<option value="10" selected="selected">$10</option>
<option value="15">$15</option>
<option value="20">$20</option>
<option value="25">$25</option>
<option value="30">$30</option>
<option value="35">$35</option>
<option value="40">$40</option>
<option value="45">$45</option>
<option value="50">$50</option>
<option value="75">$75</option>
<option value="100">$100</option>
<option value="150">$150</option>
<option value="200">$200</option>
<option value="250">$250</option>
<option value="300">$300</option>
<option value="350">$350</option>
<option value="400">$400</option>
<option value="450">$450</option>
<option value="500">$500</option>
</select>
</div>
<div class="ui-grid-b">
<input type="number" name="card1EnterAmount" id="giftCardAmountInput1"
class="right" placeholder="OR - Enter Amount" style="width: 30%;
padding-right:20px; height: 20%" onmousedown="enterAmt()"/>
</div>
答案 0 :(得分:1)
如果这是你想要的,请看看小提琴:
<强> JS 强>
$('#giftCardAmountInput1').on('change keyup', function(){
if ($('#giftCardAmount1').val() != '-') {
$('#giftCardAmount1').append('<option selected="selected" value="-">-</option>');
}
});
$('#giftCardAmount1').on('change', function(){
$('#giftCardAmountInput1').val('');
$('#giftCardAmount1').find('option[value="-"]').remove();
});