如果在下拉列表中选择了某个值,则显示一个按钮,否则将其隐藏

时间:2015-01-28 09:11:41

标签: jquery

我是堆叠交换的新手,所以请原谅,如果有什么不对的话

我只是在用户从提供的下拉菜单中选择某个内容时才会显示一个按钮。如果他没有考虑它,那就把它隐藏起来。

顺便说一句,我是jquery的新手

我的HTML代码是

<div id="mos">
<div id="mosblock" class="moseffect stitched">
    <aside>
        <div class="textwidget widget-text">
            <div id='chainselect_wrap' class='branch cs_count_1'>
                <select name="branch" id='chainlist_1' >
                    <option>Select Branch</option>
                    <option value='33'>Aeronautical Engineering (AE) (12)</option>
                    <option value='28'>Automobile engineering (14)</option>
                    <option value='35'>Bio-Technology (BT) (12)</option>
                    <option value='34'>BioMedical Engineering (BE) (12)</option>
                    <option value='36'>Chemical Engineering (CE) (12)</option>
                    <option value='32'>Civil Engineering (17)</option>
                    <option value='51'>common to all (8)</option>
                    <option value="61">Computer Engineering(CE) (18)</option>
                </select>
       <input type='hidden'id='chainselects_taxurl'value='' />        
       <input type='hidden' id='chainselects_siteurl' value='something.com' />
       <input name="findbranch" type='button' id="brancher" value='Find' />
        <span id='chainselects_loading'></span>
            </div>
        </div>
     </aside>
</div>

我的 css

#brancher{ display:none;}

最后,因为我是 jquery 的新手,可能是错的,但它是

 if ($("#chainlist_1 option").val() !== '' ) {
     $("#brancher").show();
 }

这是我想要做的事情 http://jsfiddle.net/x78b7941/  我是从几小时开始尝试它但不知道发生了什么错误

还有一件事,我可以跳过javascript并直接学习jquery或者是否需要它。有什么想法??

PLZ帮助,每一个回复对我都很有价值。提前谢谢。

3 个答案:

答案 0 :(得分:4)

尝试使用.change().toggle()功能来实现您的目标,

$("#chainlist_1").change(function () {
    $("#brancher").toggle(!isNaN(+$(this).val()));
});

DEMO

答案 1 :(得分:0)

你正在寻找这样的事情:

$("#chainlist_1").on("change", function() {
      $("#brancher").show();
});

在jquery中,您将事件附加到DOM元素,因此我们在此处所做的是等待选择值进行更改,然后显示按钮。

这里的小提琴已更新UPDATED

答案 2 :(得分:0)

select的第一个选项的值应为空白:

//jquery
$(function(){
    $("#chainlist_1").on("change",function(){
        if ($(this).val() != '' ) {
            $("#brancher").show();
        } else {
            $("#brancher").hide();
        }
    });
});

    //php
    <div id="mos">
    <div id="mosblock" class="moseffect stitched">
        <aside>
            <div class="textwidget widget-text">
                <div id='chainselect_wrap' class='branch cs_count_1'>
                    <select name="branch" id='chainlist_1' >
                        <option value=''>Select Branch</option> <!-- value is blank -->
                        <option value='33'>Aeronautical Engineering (AE) (12)</option>
                        <option value='28'>Automobile engineering (14)</option>
                        <option value='35'>Bio-Technology (BT) (12)</option>
                        <option value='34'>BioMedical Engineering (BE) (12)</option>
                        <option value='36'>Chemical Engineering (CE) (12)</option>
                        <option value='32'>Civil Engineering (17)</option>
                        <option value='51'>common to all (8)</option>
                        <option value="61">Computer Engineering(CE) (18)</option>
                    </select>
           <input type='hidden'id='chainselects_taxurl'value='' />        
           <input type='hidden' id='chainselects_siteurl' value='something.com' />
           <input name="findbranch" type='button' id="brancher" value='Find' />
            <span id='chainselects_loading'></span>
                </div>
            </div>
         </aside>
    </div>