jquery - 根据选择值显示特定输入框

Question

我是 javascript 新手，但我试图根据选择框选项绑定显示哪个输入框。我想知道是否有人可以查看我的一小段代码，首先告诉我为什么它不起作用，然后告诉我是否有更好的方法来实现这一点。

http://jsfiddle.net/spadez/MJGmg/2/

function applyselect()
{
    if (!$("#apply email:selected").length) {
    $("website").addClass("hidden");        
    }
    else {
    $("email").addClass("hidden");         
    }
}

$(function() {
  applyselect();
});

Ps 我很想把它包裹在一个函数中。

Answer 1

您需要将change事件绑定到选择。

$(document).ready(function () {
    $("#apply").change(function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $("input").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
});

为什么$("#apply").trigger('change');？

因为需要在 DOM 准备好之后执行该函数。否则，您可以删除该行并添加class="hidden"到您的<input id="website">（默认情况下，页面加载时不是选定的选项）。

这是代码的工作小提琴。

Answer 2

演示

你应该使用on选择器

$(document).ready(function () {
    $(this).on('change', '#apply',function() {
        var selected = $(this).find(':selected').val(),
            elem = $("#"+selected);
        $("input").addClass('hidden');
        elem.removeClass('hidden');
    });
    $("#apply").trigger('change');
});

Answer 3

您忘记了#匹配元素的 id。

$("website").addClass("hidden"); 
   ^---- Here goes a #

你的另一个电话也一样$("email").addClass("hidden");