Question

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

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

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

P.s我非常想把它包裹在一个函数中。

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">（默认情况下，页面加载时不是选定的选项）。

以下是代码的working fiddle。

Answer 2

<强> Demo

您应该使用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");

也是如此

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

3 个答案: