简体   繁体   中英

Update dropdown selected value to hyphen(-) as soon as text box clicked

I have an amount dropdown, whose initial selected value is $10, and an amount textbox, project requirement is as soon as the user start typing in the textbox the dropdown value should change to "-" and as soon as again the user clicks on dropdown the value in textbox should be blank and the hyphen should be removed, please suggest how to achieve this. Below is the code (no script written so far):

<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>

Take look on the fiddle if this is what you want:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM