select selected option using jquery to show specific result
Using jquery, how do i tell which select 开发者_开发知识库option is selected, and "show" a single corresponding hidden div?
<select id="mySelect">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Third</option>
</select>
<label for="name">Name</label>
<input id="name" type="text" />
<button id="search">search</button>
<div id="results-A"> lorem ipsum </div>
<div id="results-B"> lorem ipsum </div>
<div id="results-C"> lorem ipsum </div>
$(document).ready(function(){
$("#results-A").hide();
$("#results-B").hide();
$("#results-C").hide();
$("#search").bind("click", function() {
});
});
If you follow this convention:
<div id="results-1"> lorem ipsum </div>
<div id="results-2"> lorem ipsum </div>
<div id="results-3"> lorem ipsum </div>
then:
$("#mySelect").change(function() {
//optionally, if you want previously selected ones to be hidden
$("[id^=results-]").hide();
$("#results-" + $(this).val()).show();
}).change(); // trigger it the first time around, to reveal the 'default'
Demo: http://jsfiddle.net/9aqTB/
First of all, let's wrap the results elements so that they're easily accessible.
<div id="results">
<div id="results-A"> lorem ipsum </div>
<div id="results-B"> lorem ipsum </div>
<div id="results-C"> lorem ipsum </div>
</div>
You can then use the value of the drop-down to select the result div with that index. Indexes start at 0 so I've added -1 to match correctly.
$("#search").click(function() {
var value = parseInt($("#mySelect").val()) -1;
$("#results").children().hide().eq(value).show();
});
Here's a demo http://jsfiddle.net/ShLRh/
sorry but i think i've messed with your coding a bit but i think it does basically what you want.
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
hideAllResults();
// on change show them
$("#mySelect").change(function(){
hideAllResults();
$("#"+($(this).val())).show();
});
});
function hideAllResults(){
//hide all result div first
$("#resultDiv div").each(function(){
$(this).hide();
});
}
</script>
</head>
<select id="mySelect">
<option value="results-A">First</option>
<option value="results-B">Second</option>
<option value="results-C">Third</option>
</select>
<label for="name">Name</label>
<input id="name" type="text" />
<button id="search">search</button>
<div id="resultDiv">
<div id="results-A" class="result"> lorem ipsum A</div>
<div id="results-B" class="result"> lorem ipsum B</div>
<div id="results-C" class="result"> lorem ipsum C</div>
</div>
</html>
if you're using jQuery 1.4.2 then this will show the nth div according to the nth option being selected:
$("#search").click(function() {
$('div').hide().eq($(':selected').index()).show();
});
http://jsfiddle.net/e9Dc5/
加载中,请稍侯......
精彩评论