Question

我有一个html文件，它有一个包含7个选项的组合框，每个选项也有7个按钮。但它不适用于我的Chrome浏览器，我相信我的代码有问题。我不知道为什么，任何帮助都会受到赞赏。

Jquery的：

$(document).ready(function(){
$("#myButton1").hide();
$("#myButton2").hide();
$("#myButton3").hide();
$("#myButton4").hide();
$("#myButton5").hide();
$("#myButton6").hide();
$("#myButton7").hide();
    $("#opt1").click(function(){
        $("#myButton1").show();
        $("#myButton1").fadeIn(1000);
        $("#myButton1").click(function(){
            $("#myButton1").hide();            
        });
    });
    $("#opt2").click(function(){
        $("#myButton2").show();
        $("#myButton2").fadeIn(1000);
        $("#myButton2").click(function(){
            $("#myButton2").hide();            
        });
    });
    $("#opt3").click(function(){
        $("#myButton3").show();
        $("#myButton3").fadeIn(1000);
        $("#myButton3").click(function(){
            $("#myButton3").hide();            
        });
    });
    $("#opt4").click(function(){
        $("#myButton4").show();
        $("#myButton4").fadeIn(1000);
        $("#myButton4").click(function(){
            $("#myButton4").hide();            
        });
    });
    $("#opt5").click(function(){
        $("#myButton5").show();
        $("#myButton5").fadeIn(1000);
        $("#myButton5").click(function(){
            $("#myButton5").hide();            
        });
    });
    $("#opt6").click(function(){
        $("#myButton6").show();
        $("#myButton6").fadeIn(1000);
        $("#myButton6").click(function(){
            $("#myButton6").hide();            
        });
    });
    $("#opt7").click(function(){
        $("#myButton7").show();
        $("#myButton7").fadeIn(1000);
        $("#myButton7").click(function(){
            $("#myButton7").hide();            
        });
    });
});

HTML：

<select>
    <option id="opt1">One</option>
    <option id="opt2">Two</option>
    <option id="opt3">Three</option>
    <option id="opt4">Four</option>
    <option id="opt5">Five</option>
    <option id="opt6">Six</option>
    <option id="opt7">Seven</option>
</select>
<input type="button" value="Click 1" id="myButton1"/>
<input type="button" value="Click 2" id="myButton2"/>
<input type="button" value="Click 3" id="myButton3"/>
<input type="button" value="Click 4" id="myButton4"/>
<input type="button" value="Click 5" id="myButton5"/>
<input type="button" value="Click 6" id="myButton6"/>
<input type="button" value="Click 7" id="myButton7"/>

JSFiddle：http://jsfiddle.net/GqdS7/

Answer 1

您可以将整个代码缩减为

$(function(){
    $("[id^=myButton]").hide().click(function(){
         $(this).hide();            
    });;
    $('#idOfYourSelect').change(function(){
        $('#myButton'+(this.selectedIndex+1)).fadeIn(1000)
    });
});

具有额外的好处，它可以在所有浏览器中使用（不要绑定在select的选项的click事件上，使用select的change事件。）

Demonstration

Answer 2

这是updated fiddle。

基本上，您无法将控件链接到<option>标记。因此你的问题。

在你的html中，我为每个选项添加了一个value属性，因为它更清晰，更快速地访问该值，而不是剥离id并获取值。

Answer 3

我已经更改了您的代码。

html代码：

 <select class="mySelect">
    <option value="">Select</option>
    <option value="myButton1">One</option>
    <option value="myButton2">Two</option>
    <option value="myButton3">Three</option>
    <option value="myButton4">Four</option>
    <option value="myButton5">Five</option>
    <option value="myButton6">Six</option>
    <option value="myButton7">Seven</option>
</select>
<input type="button" value="Click 1" id="myButton1" class="myButton"/>
<input type="button" value="Click 2" id="myButton2" class="myButton"/>
<input type="button" value="Click 3" id="myButton3" class="myButton"/>
<input type="button" value="Click 4" id="myButton4" class="myButton"/>
<input type="button" value="Click 5" id="myButton5" class="myButton"/>
<input type="button" value="Click 6" id="myButton6" class="myButton"/>
<input type="button" value="Click 7" id="myButton7" class="myButton"/>

jQuery代码：

$(document).ready(function(){

    $('.mySelect').change(function(){
        var thisValue = $(this).val();
        $('#'+thisValue).fadeIn(1000);
    });

    $('.myButton').hide().click(function(){
        $(this).hide();
    });

});

working demo

Answer 4

尝试

$('#select_list_id').change(function() {
    if ($(this).val() === 'One') {
        // Do something for option "One"
    }
});

我的jquery代码无法在Chrome浏览器上运行

4 个答案:

html代码：

jQuery代码：