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