如果选择了下拉菜单中的值，则显示输入框o

Question

我正在研究一个简单的php联系表单，并努力在下拉列表中选择“其他”选项，以便在选中时显示文本字段选项。 该表单包含在<?php require_once('includes/contact_form.php'); ?> <?php require_once('includes/contact_form.php'); ?>页脚也是一个包含（页脚是我添加JS的地方）。

但它不会工作......

这是表格：

<label>How did you hear about us?</label>
<select name="how" class="selectfield" id="how">
  <option value="">Please Select...</option>
  <option value="Advertisement">Advertisement</option>
  <option value="Care at Home Today">Care at Home Today</option>
  <option value="Email-Newsletter">Email/Newsletter</option>
  <option value="Facebook">Facebook</option>
  <option value="Family-Friend">Family or Friend</option>
  <option value="Magazine">Magazine Article</option>
  <option value="Twitter">Twitter</option>
  <option value="Website-Search Engine">Website/Search Engine</option>
  <option value="Other">Other</option>
</select>
<input type='text' id="other" class="hidden" />

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

这是JS

$('#how').change(function(){
    var selected_item = $(this).val()
    if(selected_item == "other"){
        $('#other').val("").removeClass('hidden');
    }else{
        $('#other').val(selected_item).addClass('hidden');
    }
});

Answer 1

尝试：

$('#how').change(function(){
var selected_item = $(this).val()
if(selected_item == "Other"){ // 'Other' 
    $('#other').val('').show(); //show textbox if Other is selected
}else{
    $('#other').hide(); //Hide textbox if anything else is selected
}
});

Answer 2

你的问题出在你的字符串比较中，它应该是：

 if(selected_item == "Other"){

使用大写字母O ，经过测试

Answer 3

不确定它是否是问题中的拼写错误，但您的下拉值是“其他”，而在您的js中，您正在测试“其他”。 所以有一个不匹配。 可能是你的问题

这是你的例子的一个工作小提琴，只是在你的if语句中将“other”改为“Other”。

DEMO

作为coder1984曾建议，虽然，只是使用jQuery的.show()和.hide()在你的if语句也将工作。

if(selected_item == "Other"){
    $('#other').val("").show()
}else{
    $('#other').val(selected_item).hide()
}