CODEWITHSUNDEEP
jqueryhtmlgoogle-chrome
newbie
newbie

Reputation: 27

My jquery code won't work on Chrome browser

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/

Upvotes: 0

Views: 667

Answers (4)

Vipul Vaghasiya
Vipul Vaghasiya

Reputation: 479

I have changed your code.

html code:

 <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 code:

$(document).ready(function(){

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

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

});

working demo

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382514

You can reduce your whole code to

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

with the added benefit that it will work in all browsers (don't bind on the click event of an option of a select, use the change event of the select).

Demonstration

Upvotes: 3

varun
varun

Reputation: 533

Try

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

Upvotes: 0

Arvind Sridharan
Arvind Sridharan

Reputation: 4065

Here's the updated fiddle.

Basically you can't link a control to an <option> tag. Hence your issue.

In your html i've added a value attribute to each of your options as it is cleaner and quicker to access the value instead of stripping the id and getting the value.

Upvotes: 0

Related Questions