开发者

select selected option using jquery to show specific result

开发者 https://www.devze.com 2023-01-13 21:12 出处:网络
Using jquery, how do i tell which select 开发者_开发知识库option is selected, and \"show\" a single corresponding hidden div?

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/

0

精彩评论

暂无评论...
验证码 换一张
取 消