Javascript 单击文本框后立即将下拉选择的值更新为连字符（-）

我有一个金额下拉列表，它的初始选择值是$10，还有一个金额文本框，项目要求是一旦用户开始在文本框中输入，下拉列表的值就应该变为“-”，一旦用户再次单击下拉列表，文本框中的值应该是空的，连字符应该被删除，请建议如何实现这一目标。下面是代码（到目前为止还没有编写脚本）：

$10
$15
$20
$25
$30
$35
$40
$45                  
$50
$75
$100
$150
$200
$250
$300
$350
$400
$450
$500

如果这是您想要的，请查看小提琴：

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

$（'giftCardAmountInput1'）。在（'change keyup'，function（）上{
如果（$（'#giftCardAmount1'）.val（）！='-'））{
$（'#giftCardAmount1'）。追加（'-'）；
}
});
$（'giftCardAmount1'）。on（'change'，function（）{
$（'#giftCardAmountInput1'）.val（''；
$（'giftCardAmount1'）.find（'option[value=“-”]）.remove（）；
});

这是我想要的，实际上，用户开始在文本框上键入文字时，应立即添加连字符，当用户单击下拉列表时，应删除hypen，简而言之，hypen不应作为下拉列表的一部分，应添加和删除hypen，因此现在，在选择列表中添加/删除连字符。

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