ansaurus

Question

select selected option using jquery to show specific result

Answer 1

+1 A:

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/

karim79 2010-08-27 00:33:49

Answer 2

A:

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/

Marko 2010-08-27 00:40:45

You'll keep showing more and more div's with this. Shouldn't you hide the currently shown div?

David Hoerster 2010-08-27 00:42:54

You're right, I've added a hide() on all elements before the specific show occurs

Marko 2010-08-27 00:44:41

Answer 3

A:

Hi, 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>

melaos 2010-08-27 01:08:12

Your hideAllResults function can actually just be replaced by doing $("#resultDiv div").hide(). hide() works with an array of elements, not just one.. so no need to iterate through them

Marko 2010-08-27 01:46:12

lol. o yeah you're right my bad. i've recently developed a .each happy code.

melaos 2010-08-27 05:42:33

Answer 4

A:

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/

Scott Evernden 2010-08-27 01:28:43

ansaurus

tags:

views:

answers:

select selected option using jquery to show specific result

related questions