ansaurus

Question

How would I show elements based on what is selected in a drop down using jQuery?

Answer 1

+7 A:

Assuming each div has the class ".panel"

$("select").change(function(){
  $(".panel").hide().filter("#"+ $(this).val() +"_fields").show();
});

You could expand upon this basis to see if the new selection matches that is currently visible if you like. You can determine which is presently opened like this:

var currPanel = $(".panel:visible").attr("id");

Jonathan Sampson 2010-01-08 04:10:51

Exactly what I needed. Thanks!

Shpigford 2010-01-08 04:17:48

+1 Great answer

Doug Neiner 2010-01-08 04:21:54

Answer 2

+1 A:

You'll probably want to put the divs in a class like this:

<div class='theFields' id='textarea_fields'>...</div>    
<div class='theFields' id='checkbox_fields'>...</div>

Then you can do something like this:

$("select").change(function() {
  $(".theFields").hide(); // hide all field divs
  $("#"+$(this).val()+"_fields").show(); // the the one you want
});

gnarf 2010-01-08 04:14:26

Answer 3

A:

Oh well, since I've already spent some time coding this up, might as well post the entire codes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

    <script type="text/javascript">
    $(function() {
      $("#elements > *").hide();
      $("#selector").change(function(){
          $("#elements > *").hide();
          if($("#selector").val()) //if selected has value, then show the selected one
            $("#" + $("#selector").val()).show();
      });
    });

    </script>
</head>
<body>
<select id="selector">
  <option value="">--Select One--</option> <!-- this hides all -->
  <option value="textarea">Text Area</option>
  <option value="textbox">Text Box</option>
  <option value="checkbox">Check Box</option>
  <option value="dropdown">Drop Down</option>
</select>

<div id="elements"> <!-- container for the input elements-->
    <textarea id="textarea"></textarea>
    <input type="text" id="textbox" />
    <input type="checkbox" id="checkbox" />
    <select id="dropdown"><option>...</option></select>
</div>
</body>
</html>

o.k.w 2010-01-08 04:25:35

Answer 4

A:

o.k.w - thanks so much for posting that! :-) just made my day

Markgt 2010-08-20 11:55:01

ansaurus

tags:

views:

answers:

How would I show elements based on what is selected in a drop down using jQuery?

related questions