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

我想建立一个表单，用户选择他们的首选联系方式，只有该方法是必需/可见的。所以电子邮件和电话输入字段最初是隐藏的，然后当他们选择电话或电子邮件时，只有该字段显示在下面。下拉菜单来显示和隐藏输入字段

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" />

来源

2014-10-28 Peyton Gregory

你的问题是什么？ – Regent 2014-10-28 13:40:20

你到底需要什么帮助？你的例子表明它只能使用电话下拉菜单。 – chriz 2014-10-28 13:42:31

你已经做了几个错误在你的JavaScript，下面我已经发布了修正后的js。

首先，您忘记在第二个if声明后添加else，其次您需要将隐藏类添加到未选中的选项，以便在显示另一个选项时隐藏一个选项。

$('#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'); 
    } 
});

来源

2014-10-28 13:43:37 ginja

您需要使用elseif并添加隐藏到未选中。

$('#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'); 
     } 
    });

来源

2014-10-28 13:45:56 vaso123

从你给我们的，我只能猜测你想要相应的输入字段显示，如果从下拉列表中选择？

你几乎在那里。你只是忘了将.addClass('hidden');添加到两个输入。哦，你只有2 if陈述和else，我改变了第二个if为else if，以保持循环。

Example

来源

2014-10-28 13:47:39 chriz

那么，如果这种想法实际上是隐藏其他<input>小号除了选择一个，然后代码可以更短，灵活的尽可能多的选择，只要你想：

Fiddle

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

注意：我将类inputs添加到所有相关<input> s。

来源

2014-10-28 13:50:55 Regent

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

回答

相关问题