Reputation: 27
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
Reputation: 479
I have changed your 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"/>
$(document).ready(function(){
$('.mySelect').change(function(){
var thisValue = $(this).val();
$('#'+thisValue).fadeIn(1000);
});
$('.myButton').hide().click(function(){
$(this).hide();
});
});
Upvotes: 0
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).
Upvotes: 3
Reputation: 533
Try
$('#select_list_id').change(function() {
if ($(this).val() === 'One') {
// Do something for option "One"
}
});
Upvotes: 0
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