通过jquery在HTML中选择select的选项标签

Question

我有这个代码在除了谷歌浏览器之外的所有浏览器上运行良好，我真的不知道为什么。

HTML

<div class='form-group text-center' >   
    <label><h4>What card is it?</h4>
        <select name='card' id='select_card' class='form-control input-lg' >
            <option value=''>Select a card</option>
            <option value='card A'>card A</option>
            <option value='card B'>card B</option>
            <option value='other_card' id='other_card' >Other card</option>
        </select>
    </label>
</div>

的jQuery

$('#other_card').click(function(){
    alert('other card');
});

Answer 1

我甚至不认为option有点击事件。我认为正确的方法是观看整个选择。

$("#select_card").change(function() {
    if( $(this).val() == "other_card" )
        alert("other card");
});

Answer 2

使用select更改而不是单击选项。不需要在选项标记中使用id。

$('#select_card').change(function() {
    if ($(this).val() == "other_card") {
        alert('other card');
    }
});

Answer 3

希望这有帮助

HTML

<div class='form-group text-center'>
    <label>
        <h4>What card is it?</h4>
        <select name='card' id='select_card' onchange="selectChange(this)" class='form-control input-lg'>
            <option value=''>Select a card</option>
            <option value='card A'>card A</option>
            <option value='card B'>card B</option>
            <option value='other_card' id='other_card'>Other card</option>
        </select>
    </label>
</div

脚本

    function selectChange(e) {
if($(e).val()=="other_card"){
alert("other card")
}
    }