Question

我确信这非常简单，但我似乎无法想象我做错了什么，无论如何我的表单有一个“标题”选择列表，我想显示一个文本框如果“其他“被选中了。

<select name="title" id="title" class="required">
    <option value="" selected="selected">- Select Title -</option>
    <option value="Ms.">Ms.</option>
    <option value="Mrs.">Mrs.</option>
    <option value="Mr.">Mr.</option>
    <option value="Dr.">Dr.</option>
    <option value="Prof.">Prof.</option>
    <option value="Rev.">Rev.</option>
    <option value="Other" onclick="showOther();">Other</option>
</select>

function showOther() {
  jQuery("#otherTitle").show();
}

但那不起作用.. #otherTitle文本框在页面加载时使用jquery隐藏。

Answer 1

我建议采用不同的方法：

$("#title").change(function() {
    if($(this).find("option:last").is(':selected')) {
        $("#otherTitle").show();
    } else {
        $("#otherTitle").hide();
    }
});

也就是说，如果选择了 last 选项，则显示标识为otherTitle的文本框。我实际上使用这种方法。希望有所帮助。当然，你的“其他”字段必须始终是最后才能使用 - 而且它对于多语言网站来说非常方便。

Answer 2

将一个事件绑定到您的选择列表，当它更改时，查看该值并进行隐藏/显示

$(function(){

    $("#title").change(function () {
        if ($(this).val() == 'Other') {
            $("#otherTitle").show();
        }
    });

});

Answer 3

$(function() {    
    $('#title').change(function() {
      if (this.value === "Other") {
        $("#otherTitle").show();
      }
      else {
        $("#otherTitle").hide();
      }     
    });    
});

和 Working Demo 。添加/编辑到网址以查看代码

Answer 4

使用jQuery绑定事件处理程序而不是“onfoo”元素属性
最好将处理程序绑定到“select”元素，因为有些方法可以选择不涉及“click”事件的选项：

（一些文本使stackoverflow显示下面的代码块）

$(function() {
  $('#title').change(function() {
    if ($(this).val() == 'Other')
      $('#otherTitle').show();
    else
      $('#otherTitle').hide();
  });
});

我宁愿给“其他”选项一个“id”值，而不是依赖于“value”，但无论如何。

在使用jquery选择显示文本框？

4 个答案: