在选择的选项输入项的条件下添加div

时间:2014-02-04 18:46:23

标签: jquery

我有一位客户希望在联系表单上找到“您是如何找到我们的”选项。显然我会使用select和option来做这件事,但他还想要的是如果选中的选项是“推荐”,那么会出现一个询问是谁推荐它们的方框。目前我很接近,但由于某种原因这不起作用:

HTML

<div class="form-line">
<label for="findUs">How did you find us?</label> 
<select name="findUs" id="findUs">
<option>Select...</option>
<option value ="Search Engine (e.g. Google)">Search Engine (e.g. Google)</option>
<option value ="Have used us before">Have used us before</option>
<option value ="Recommendation">Recommendation</option>
<option value ="Center Parcs">Center Parcs</option>
<option value ="Yell.com">Yell.com</option>
<option value ="Free Index">Free Index</option>
<option value ="Other">Other</option>

</select>
</div>

jQuery -

$("#findUs").change(function() {
                var e = document.getElementById("findUs");
                var how = e.options[e.selectedIndex].value;
                //alert(how);

                if (how == 'recommendation') {
                    $(".recommended-box").show()
                } else {
                    $(".recommended-box").hide()
                }
            });   

谢谢!

2 个答案:

答案 0 :(得分:1)

recommendation!= Recommendation。另外,如果您使用的是jQuery,请使用jQuery:

http://jsfiddle.net/m26cg/

$('#findUs').change(function() {
    $(".recommended-box").toggle($(this).val() == 'Recommendation');
});

答案 1 :(得分:0)

主要问题是'recommendation' != 'Recommendation'

使用.val()

$("#findUs").change(function () {
    if ($(this).val().toLowerCase() == 'recommendation') {
        $(".recommended-box").show()
    } else {
        $(".recommended-box").hide()
    }
});

DEMO

$("#findUs").change(function () {
    $(".recommended-box").toggle($(this).val().toLowerCase() == 'recommendation');
});