Question

我遇到了问题。我有一个包含多个选项的选择框

<select name="p_hour">
<option value="00">12 am</option>
<option value="01">1 am</option>
<option value="02">2 am</option>
<option value="03">3 am</option>
<option value="04">4 am</option>
<option value="05">5 am</option>
<option value="06">6 am</option>
<option value="07">7 am</option>
<option value="08">8 am</option>
<option value="09">9 am</option>
<option value="10">10 am</option>
</select>

我想要实现的是当有人做出选择时，选项中的文本应该仅在没有am / pm的情况下更改为数字。代码是

jQuery("select[name='p_hour']").on('change', function() {
    $selectedval = jQuery("select[name='p_hour'] option:selected").text();
    $selectedval = $selectedval.slice(0,-2);
    jQuery("select[name='p_hour'] option:selected").text($selectedval);
    $selectedval = '';
});

但问题是，只有在进行了其他选择时，选项的文本仍为数字，我只想更改所选选项的文本。任何人都可以帮助我吗？

Answer 1

这是因为您错过);关闭.on()处理程序，并确保您已将代码放入DOM就绪处理程序中：

jQuery(function () {
    jQuery("select[name='p_hour']").on('change', function () {
        $selectedval = jQuery("select[name='p_hour'] option:selected").text();
        $selectedval = $selectedval.slice(0, -2);
        alert($selectedval);
        jQuery("select[name='p_hour'] option:selected").text($selectedval);
        $selectedval = '';
    }); // <-- Here
});

<强> Fiddle Demo

Answer 2

可能不是最优雅的方式，但请尝试

jQuery(function ($) {
    var selectedval, $select = $("select[name='p_hour']"),
        $prev;
    $select.on('change', function () {
        var $cur = $select.find("option:selected")
        if ($prev) {
            if ($prev.is($cur)) {
                return;
            }
            $prev.text(selectedval);
        }
        selectedval = $cur.text();
        $cur.text(selectedval.slice(0, -2));
        $prev = $cur
    }).change()
})

演示：Fiddle

仅更改所选选项的文本

2 个答案: