0

I'm using a flexbox (fairwaytech.com/flexbox/) as an alternative to a normal dropdown box as there are hundreds of options to choose from on my form. If some of those options are selected, I want a hidden DIV to appear without having to refresh the page.

In this case the flexbox determines job titles. So, if the user types in 'Doctor' and selects the result, then the flexbox returns the code <input type="hidden" id="fb_hidden" name="fb" value="2">, where the value 2 relates to the job title 'Doctor' in the database.

When somebody selects Doctor I want a hidden div to appear, but if a different job title is selected, it stays hidden. Can somebody help me with this please? Here's my code:

<input type="hidden" id="fb_hidden" name="fb" value="2">
<div id="hide" style="display:none;">
<div>
Title
</div>
<div>
<input id="number" name="number" type="text" value="">
</div>
</div>
cimmanon
  • 67,211
  • 17
  • 165
  • 171
nutman
  • 569
  • 3
  • 9
  • 22

1 Answers1

1

Flexbox got onSelect event (which is similar to html select change event). Try:

$('#FLEXBOX_ID').flexbox(data, {
    onSelect: function() {
        if(this.value==="Doctor"){
             $("#DIV_ID").show();
        }else{
             $("#DIV_ID").hide();
        }
    }
});
Kiran
  • 20,167
  • 11
  • 67
  • 99
  • Brilliant thank you. How would I add multiple values? So if I wanted the DIV to be shown if 'Dentist' was selected too? – nutman Oct 02 '13 at 14:51
  • 1
    Use `||` operator i.e., `if(this.value==="Doctor" || this.value==="Dentist")` – Kiran Oct 02 '13 at 14:52
  • thank you. Lastly, is it possible to do multiple onSelect statements? for example, if you select Doctor it shows one div, but if you select Dentist it shows a different div? – nutman Oct 02 '13 at 14:59
  • 1
    No. Use one onSelect. But you can use `if(this.value==="Doctor")` show div else `if(this.value==="Dentist")` show relevant div. – Kiran Oct 02 '13 at 15:02