根据 <input> 值显示 <div>答案

【问题标题】：show <div> depending on <input> value根据 <input> 值显示 <div>
【发布时间】：2013-10-02 14:27:40
【问题描述】：

我使用 flexbox (fairwaytech.com/flexbox/) 作为普通下拉框的替代品，因为我的表单上有数百个选项可供选择。如果选择了其中一些选项，我希望显示隐藏的 DIV 而无需刷新页面。

在这种情况下，弹性框决定职位。因此，如果用户输入“医生”并选择结果，则弹性框返回代码<input type="hidden" id="fb_hidden" name="fb" value="2">，其中值 2 与数据库中的职位“医生”相关。

当有人选择医生时，我希望显示一个隐藏的 div，但如果选择了不同的职位，它将保持隐藏状态。有人可以帮我吗？这是我的代码：

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

【问题讨论】：

flexbox 是否在输入端触发 change 事件？
Flexbox != jQuery FlexBox，确保你使用了正确的标签

标签： javascript jquery html hidden jquery-flexbox

【解决方案1】：

Flexbox 获得了 onSelect 事件（类似于 html 选择更改事件）。试试：

$('#FLEXBOX_ID').flexbox(data, {
    onSelect: function() {
        if(this.value==="Doctor"){
             $("#DIV_ID").show();
        }else{
             $("#DIV_ID").hide();
        }
    }
});

【讨论】：

非常感谢。我将如何添加多个值？那么，如果我也希望在选择“牙医”的情况下显示 DIV？
使用|| 运算符，即if(this.value==="Doctor" || this.value==="Dentist")
谢谢。最后，是否可以执行多个 onSelect 语句？例如，如果您选择 Doctor，它会显示一个 div，但如果您选择 Dentist，它会显示一个不同的 div？
没有。使用一个 onSelect。但是你可以使用if(this.value==="Doctor") show div else if(this.value==="Dentist") show related div。