选择框选项上的ID未按预期工作

时间:2012-03-30 10:34:45

标签: jquery html

我正在使用选择框并使用jquery。

HTML结构:

<form method="" action="" name="form_controller">
        <select name="select_pages" id="selector">
            <option id="select_e1_home">Home</option>
            <option id="select_e1_resin_collection">Resin Collection</option>
            <option id="select_e1_metal_collection">Metal Collection</option>
            <option id="select_e1_decor_track">Decor Track</option>
            <option id="select_e1_accessories">Accessories</option>
            <option id="select_e1_acrylic_collection">Acrylic Collection</option>
            <option id="select_e1_novelty_collection">Novelty Collection</option>
            <option id="select_e1_wood_collection">Wood Collection</option>
            <option id="select_e1_specification">Specification</option>
        </select>
    </form>

Jquery的:

$('#selector #select_e1_home').click(function(e){ e.preventDefault(); $('#mybook, #mybook1').booklet(1); });
$('#selector #select_e1_resin_collection').click(function(e){ e.preventDefault(); $('#mybook, #mybook1').booklet(3); });

当我根据id从选择框中选择选项时,我在DIV上设置了小册子编号,这是我的mybook和mybook1。

我的问题是上面的jquery在Chrome和Safari之外的所有浏览器中都能正常工作。任何人都可以指出我正确的方向。

2 个答案:

答案 0 :(得分:3)

所有浏览器都不支持click option事件。将其更改为change的{​​{1}}:

select

答案 1 :(得分:1)

$('#selector').change(function(e){
        if(document.getElementById("selector").selectedIndex == 0){
            e.preventDefault(); $('#mybook, #mybook1').booklet(1);
        }
        else if(document.getElementById("selector").selectedIndex == 1){
            e.preventDefault(); $('#mybook, #mybook1').booklet(3);
        }
        else if(document.getElementById("selector").selectedIndex == 2){
            e.preventDefault(); $('#mybook, #mybook1').booklet(10);
        }
        else if(document.getElementById("selector").selectedIndex == 3){
            e.preventDefault(); $('#mybook, #mybook1').booklet(17);
        }
        else if(document.getElementById("selector").selectedIndex == 4){
            e.preventDefault(); $('#mybook, #mybook1').booklet(18);
        }
        else if(document.getElementById("selector").selectedIndex == 5){
            e.preventDefault(); $('#mybook, #mybook1').booklet(20);
        }
        else if(document.getElementById("selector").selectedIndex == 6){
            e.preventDefault(); $('#mybook, #mybook1').booklet(24);
        }
        else if(document.getElementById("selector").selectedIndex == 7){
            e.preventDefault(); $('#mybook, #mybook1').booklet(28);
        }
        else if(document.getElementById("selector").selectedIndex == 8){
            e.preventDefault(); $('#mybook, #mybook1').booklet(32);
        }
    });