CODEWITHSUNDEEP
phpjavascriptjquery
Udders
Udders

Reputation: 6986

Show/hide fields depending on select value

I am trying to show and hide a few form fields depending on the value of one of my select fields. I am looking to use arrays to hold what should be shown and what should not be shown for each select value, to save me from a massive switch statement, but cannot figure out how to do it.

I am using PHP and jQuery. Any help would be great.

Upvotes: 14

Views: 60980

Answers (6)

cssyphus
cssyphus

Reputation: 40106

Here is a very simple example:

The purpose is to show A SIMPLE EXAMPLE of how to use an array of values to show/hide fields depending upon the value of a select.

In this demo, I could have used the classNames to show/hide the group of fields all-at-once -- but that's not the purpose of the example -- so the classNames were used only for CSS.

Because the demo uses IDs (with two arrays of these IDs) for the demo, it doesn't matter whether the fields to be hidden are input fields, divs, imgs or what-have-you. The ID identifies whatever-it-is-to-be-hid.

var aPeople = ['bob','sam','ted'];
var aTransport = ['car','bike','truck'];

$('#mySel').change(function(){
   $('.alldiv').hide(); //Hide them all to start...
   let sel = $(this).val(); //Get selected option value
   if ( sel=='ppl' ){
      for (let i=0; i<aPeople.length;i++){
         $('#' + aPeople[i]).show();
      }
   }else if ( sel=='tpt' ){
      for (let i=0; i<aTransport.length;i++){
         $('#' + aTransport[i]).show();
      }
   }else{
      //Choose selected
      $('.alldiv').show();
   }
});
.alldiv{width:30vw;height:10vh;padding:2vh 2vw;text-align:center;}
.ppl{background:palegreen;}
.tpt{background:wheat;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<select id="mySel">
  <option value="">Choose:</option>
  <option value="ppl">People</option>
  <option value="tpt">Vehicles</option>
</select>

<div id="bob" class="alldiv ppl">People: Bob</div>
<div id="car" class="alldiv tpt">Vehicle: Car</div>
<div id="truck" class="alldiv tpt">Vehicle: Truck</div>
<div id="sam" class="alldiv ppl">People: Sam</div>
<div id="ted" class="alldiv ppl">People: Ted</div>
<div id="bike" class="alldiv tpt">Vehicle: Bike</div>

Upvotes: 0

safepost
safepost

Reputation: 165

My 2 cents : I needed to show/hide fields depending on many previous select value (not only one).

So I add a parent attribute to div fields like this :

<div id="view" parent="none">
<select class=selector id="view">
<option value="0"> -- Make a choice --</option>
<option value="s1">sub 1</option>
<option value="s2">sub 2</option>
<option value="s3">sub 3</option>
</select>
</div>

<!-- you need to define the parent value with the value of parent div id -->
<div id="s1" parent="view">
<!-- if you want to have a selector be sure it has the same id as the div -->
<select class=selector id="s1">
<option value="0">-- Make a choice --</option>
<option value="s1_sub1">sub 1 of s1</option>
<option value="s1_sub2">sub 2 of s1</option>
<option value="s1_sub3">sub 3 of s1</option>
</select>
</div>

<!-- Make the same thing for s2 and s3
Define div s2 here

Define div s3 here
-->

<!-- and finally if that's your final step you put what you want in the div -->
<div id="s1_sub1" parent="s1">
You are inside s1 sub1
</div>

Now the jquery code :

$(document).ready(function() {

 $('select[class=selector]').change(function() { 
    //next div to show
    var selectorActive = $(this).val();
    //div where you are 
    var parentValue = $(this).attr("id");

   //show active div and hide others
    $('div').hide().filter('#' + selectorActive).show();

    while (parentValue!="none") {
      //then show parents of active div
      $('div[id=' + parentValue + ']').show();
      //return the parent of div until "none"
      parentValue = $('div[id=' + parentValue + ']').attr("parent");
     }

 });

// print only the first div at start
 $('div').hide().filter("#view").show();

});

That's works like a charm and you don't need to define maps

I hope this will help

Upvotes: 1

Jean
Jean

Reputation:

To fire up the code on load, just add .change(). As shown below...

$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1'),
    'view2' : $('#view2a, #view2b'),
    'view3' : $('#view3')
  };

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
    // show current
    $.viewMap[$(this).val()].show();
  }).change();
});

Upvotes: 3

Jose
Jose

Reputation: 1

@Martin Try this 

`$('#viewSelector').trigger('change');`

Upvotes: 0

James
James

Reputation: 112000

There are a few different ways you could do this. The simplest is to have a few separate fieldsets, each one containing a single group of fields. Then, in jQuery, dependent on the select-menu's value you can show/hide these fieldsets, e.g.

<fieldset id="f1">
    <input name="something1" />
    <input name="something2" />
    <input name="something3" />
</fieldset>
<fieldset id="f2">
    <input name="something4" />
    <input name="something5" />
    <input name="something6" />
</fieldset>
<select name="fieldset-choice">
    <option value="f1">Fieldset 1</option>
    <option value="f2">Fieldset 2</option>
</select>

<script type="text/javascript">
    jQuery('select[name=fieldset-choice]').change(function(){
        var fieldsetName = $(this).val();
        $('fieldset').hide().filter('#' + fieldsetName).show();
    });

    // We need to hide all fieldsets except the first:
    $('fieldset').hide().filter('#f1').show();
</script>

Note: For the above technique to be entirely unobtrusive you might want to dynamically build the select-menu with the names of all the different fieldsets.

Alternatively you can prefix each fields name with a meaningful prefix, and then hide/show according to that attribute:

<input name="group1-name1" />
<input name="group1-name2" />

<input name="group2-name3" />
<input name="group2-name4" />
<input name="group2-name5" />

<select name="field-choice">
    <option value="group1">Group 1</option>
    <option value="group2">Group 2</option>
</select>

<script type="text/javascript">
    jQuery('select[name=field-choice]').change(function(){
        var groupName = $(this).val();
        $('input').hide().filter('[name^=' + groupName + ']').show();
    });

    // We need to hide all fields except those of the first group:
    $('input').hide().filter('[name^=group1]').show();
</script>

Upvotes: 6

bendewey
bendewey

Reputation: 40265

Try something like this:

<select id="viewSelector">
   <option value="0">-- Select a View --</option>       
   <option value="view1">view1</option>
   <option value="view2">view2</option>
   <option value="view3">view3</option>
</select>

<div id="view1">
  <!-- content --> 
</div>
<div id="view2a">
  <!-- content --> 
</div>
<div id="view2b">
  <!-- content --> 
</div>
<div id="view3">
  <!-- content --> 
</div>

then in the jQuery:

$(document).ready(function() {
  $.viewMap = {
    '0' : $([]),
    'view1' : $('#view1'),
    'view2' : $('#view2a, #view2b'),
    'view3' : $('#view3')
  };

  $('#viewSelector').change(function() {
    // hide all
    $.each($.viewMap, function() { this.hide(); });
    // show current
    $.viewMap[$(this).val()].show();
  });
});

Upvotes: 35

Related Questions