Question

我正在尝试构建一个用户选择其首选联系方式的表单，并且只需要该方法/可见。因此，电子邮件和电话输入字段最初是隐藏的，然后当他们选择电话或电子邮件时，只显示下面的字段。

http://jsfiddle.net/PeytonGregory/de66edpj/

<script>
$('#contact-method').change(function(){
var selected_item = $(this).val()
if(selected_item == "email"){
    $('#email').val("").removeClass('hidden');
    $('#phone').val("").removeClass('required');
}if(selected_item == "phone"){
    $('#phone').val("").removeClass('hidden');
    $('#email').val("").removeClass('required');
}else{
    $('#phone').val(selected_item).addClass('hidden');
    $('#email').val(selected_item).addClass('hidden');
}
});
</script>




<label>Preferred Method of Contact?</label>
<select name="contact-method" class="selectfield" id="contact-method">
<option value="">Please Select...</option>
<option value="phone">Phone</option>
<option value="email">E-mail</option>
</select>
<input type='text' id="phone" placeholder="Phone" class="hidden required" />
<input type='text' id="email" placeholder="E-mail" class="hidden required" />

<input name="contactus" type="submit" class="submit" id="contactus" value="Submit" />

Answer 1

您在javascript中犯了几个错误，下面我发布了更正后的js。

首先，您忘记在第二个else语句后添加if，其次，您需要将隐藏类添加到非选定选项，以便在显示另一个选项时隐藏一个选项。

$('#contact-method').change(function(){
    var selected_item = $(this).val()
    if(selected_item == "email"){
        $('#email').val("").removeClass('hidden');
        $('#phone').val(selected_item).addClass('hidden');
        $('#phone').val("").removeClass('required');
    } else if(selected_item == "phone"){
        $('#phone').val("").removeClass('hidden');
        $('#email').val(selected_item).addClass('hidden');
        $('#email').val("").removeClass('required');
    }else{
        $('#phone').val(selected_item).addClass('hidden');
        $('#email').val(selected_item).addClass('hidden');
    }
});

Answer 2

您需要使用elseif并将hidden添加到未选中。

    $('#contact-method').change(function() {
        var selected_item = $(this).val();
        if (selected_item === "email") {
            $('#email').val("").removeClass('hidden');
            $('#phone').val("").removeClass('required').addClass('hidden');

        } else if (selected_item == "phone") {
            $('#phone').val("").removeClass('hidden');
            $('#email').val("").removeClass('required').addClass('hidden');
        } else {
            $('#phone').val(selected_item).addClass('hidden');
            $('#email').val(selected_item).addClass('hidden');
        }
    });

Answer 3

根据您提供的内容，我只能猜测您是否希望显示从下拉列表中选择的相应输入字段？

你快到了。您只是忘记将.addClass('hidden');添加到两个输入中。哦，你只有2 if个语句和else，我将第二个if更改为else if以保持循环。

Example

Answer 4

好吧，如果这个想法真的要隐藏除了选定的<input>以外的其他$('#contact-method').change(function() { $('.inputs').addClass('hidden').removeClass('required'); var selected_item = $(this).val(); $('#' + selected_item).val("").removeClass('hidden').addClass('required'); });，那么代码可以更短，更灵活，可以根据需要选择多个选项：

Fiddle

inputs

注意：我已将课程<input>添加到所有相关{{1}} s。

下拉菜单显示和隐藏输入字段

4 个答案: