0

I have a html file that has a combo box with 7 options and 7 buttons also for each option. But it won't work on my chrome browser, I believe that there is something wrong with my code. I don't know why, any help will be appreciated.

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/

4

4 回答 4

3

您可以将整个代码减少到

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

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

示范

于 2013-10-09T06:51:05.500 回答
0

尝试

$('#select_list_id').change(function() {
    if ($(this).val() === 'One') {
        // Do something for option "One"
    }
});
于 2013-10-09T07:33:53.213 回答
0

这是更新的小提琴。

基本上你不能将控件链接到<option>标签。因此你的问题。

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

于 2013-10-09T06:52:10.220 回答
0

我已经改变了你的代码。

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

于 2013-10-09T07:02:15.317 回答