onClick 后清除下拉值？

Question

我有时间值下拉菜单。如果我点击我的下拉菜单，我想重置我的下拉菜单。每次我点击我的下拉菜单时，我当前的代码都会给我一组新的值。我也尝试使用 .empty() 但这没有用。这是我的 HTML:

<td>
    <select name="stime" id="stime">
       <option value="0">--Select start time--</option>
    </select>
</td>

这是我的 JQuery:

    $j('#stime').on('click', function() {
        //Populate start time dropdown with values 
        for(var i=700; i<= 1700; i+=15){
            var mins = i % 100;
            var hours = parseInt(i/100);

            if (mins > 45) {
                mins = 0;
                hours += 1;
                i = hours * 100;
            }

            var AmPm = " AM";
            //set hours 12 to PM
            if(hours == 12){
               AmPm = " PM";
            }

        //format all hours greater than to PM
        if (hours > 12) {
            hours = hours - 12;
            AmPm = " PM";
        }

        $j('#stime').children().not(":first").empty();

        //populate stime with values
        $j('#stime').append('<option value="'+('0' + (hours)).slice(-2)+':'+('0' + mins).slice(-2)+AmPm+'">'+('0' + (hours)).slice(-2)+':'+('0' + mins).slice(-2)+AmPm+' </option>');
    }    
 });

我当前的代码为我提供了一个空白下拉菜单，每次我单击告诉我值从未被删除的下拉框后，我都可以看到滚动条变小了。如果有人可以帮助解决这个问题，请告诉我。谢谢。

Answer 1

在函数声明的下面添加这个右边

$("#stime option:gt(0)").remove();

喜欢

$j('#stime').on('click', function() { $j("#stime option:gt(0)").remove();

...

并删除这一行

$j('#stime').children().not(":first").empty();

上面的行在 for 循环内，它使所有项目成为空字符串。

onClick 后清除下拉值？

Clear drop down values after onClick?

javascript

jquery

html

html-select