显示< div>取决于<输入>值 [英] show <div> depending on <input> value

查看:98
本文介绍了显示< div>取决于<输入>值的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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



在这种情况下,flexbox确定职位名称。因此,如果用户键入'Doctor'并选择结果,则Flexbox返回代码< input type =hiddenid =fb_hiddenname =fbvalue =2 > ,其中值2与数据库中的工作标题'Doctor'相关。

当有人选择Doctor时,我想要一个隐藏的div出现,但是如果选择了不同的职位名称,它将保持隐藏状态。有人可以帮我解决这个问题吗?
这是我的代码:

 < input type =hiddenid =fb_hiddenname =fb值= 2 > 
< div id =hidestyle =display:none;>
< div>
标题
< / div>
< div>
< input id =numbername =numbertype =textvalue =>
< / div>
< / div>


解决方案

Flexbox获得了onSelect事件改变事件)。试试:

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


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>

解决方案

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

这篇关于显示&lt; div&gt;取决于&lt;输入&gt;值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆