单击文本框后,将下拉列表选中的值更新为连字符( - )

时间:2013-04-09 06:48:11

标签: javascript jquery-mobile javascript-events twitter-bootstrap

我有一个金额下拉列表,其初始选择值为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>

1 个答案:

答案 0 :(得分:1)

如果这是你想要的,请看看小提琴:

http://jsfiddle.net/ysS2z/5/

<强> 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();
});