show <div> depending on <input> value

问题

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>

回答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();
        }
    }
});

来源：https://stackoverflow.com/questions/19139402/show-div-depending-on-input-value