Question

我有一个包含5个选项的select表单元素。如果选择了选项2，我想显示另一个表单输入框（这有一个显示样式：最初没有）。如何将事件附加到选项2，以便无论何时选择它，都会显示输入框，否则它将被隐藏。我现在有这个，但是当页面加载时已经选择了选项2

$('#type').change(function(){
        var typeSelected = $(this).val();
        if (typeSelected == 2) {
            $('#extraInput').show();
        }
    });

我知道我可以添加另一段代码来检查页面加载时选择的内容但是想知道是否有更简洁的方法来执行此操作。如果在开始时没有选择选项2，那么也可以处理隐藏输入框的东西，因为我刚刚在输入框中硬编码了style =“display：none”，但我希望这是动态的。

由于

Answer 1

您可能想尝试：

  $('#type').change(function(){
            var typeSelected = $(this).val();
            if (typeSelected == 2) {
                $('#extraInput').show();
            }
            else{
            $('#extraInput').hide();
            }
        });

您的html如何看起来像<option>Option name</option>或

<option value="0">Option name</option>

参考我之前的回答：

Submit form to 2 different action page

您需要拥有选项值才能比较您选择的选项。

Answer 2

如果您在页面加载时尝试$('#type').trigger('change');该怎么办？这会解决问题吗？

$('#type').trigger('change');
$('#type').change(function(){
    var typeSelected = $(this).val();
    if (typeSelected == 2) {
        $('#extraInput').show();
    } else {
        $('#extraInput').hide();
    }
});

Answer 3

您的代码必须如下所示： DEMO： http://jsbin.com/ezolu4/edit

$(function() {

      $('#type').change(function() {
            var typeSelected = $(this).val();

            if (typeSelected == 2) {
                $('#extraInput').fadeIn(200);
            } else {
          $('#extraInput').fadeOut(200);
          }
        }).change();
    });

Ops ..我有适合您的解决方案！

Jquery附加显示事件以选择选项

3 个答案: