我相信它的一些微不足道的东西，即使如此，我有一个隐藏/显示元素通过jQuery depand在html表单上选定的值的问题。我有这样的HTML：jQuery隐藏/显示元素取决于html选择值

HTML

<select name="town" id="town" onchange="otherTown()"> 
    <option value="1">New York</option> 
    <option value="2">Washington</option> 
    <option value="3">London</option> 
    <option value="4">Other</option> 
</select> 

<div id="alt_town" style="display:none;"> 
    <label for="right-label" class="right inline">Other Town</label> 
    <input type="text" id="right-label" name="alt_town"> 
</div>

JS

function otherTown() { 
    $('#town').on('change', function() { 
     if ($(this).val() === "4") { 
      $("#alt_town").show() 
     } else { 
      $("#alt_town").hide() 
     } 
    }); 
}

当用户选择选择 “其他城市” 的形式展示了 “其他” 选项。它的工作原理，但只有在“其他”选项（例如“伦敦”选项）之前选择其他选项后才有效。即使“其他”是第一选择，我也需要显示元素。

谢谢你们的帮助。

来源

2015-07-13 Thommie

问题是你的内联事件处理程序，你只在内联事件处理程序中注册jQuery更改处理程序（这是切换显示），所以当第一次更改发生时没有执行jQuery处理程序，所以什么也没有发生。

当第二次更改被触发时，您将在上一个事件中注册处理程序并被调用并更改显示，但会导致多个更改事件处理程序被调用，因为每次更改都会添加新的jQuery事件处理程序

没有必要为内嵌处理器

//dom ready handler 
 
jQuery(function($) { 
 
    $('#town').on('change', function() { 
 
    //use toggle for ease of use 
 
    $("#alt_town").toggle(this.value == 4) 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select name="town" id="town"> 
 
    <option value="1">New York</option> 
 
    <option value="2">Washington</option> 
 
    <option value="3">London</option> 
 
    <option value="4">Other</option> 
 
</select> 
 

 
<div id="alt_town" style="display:none;"> 
 
    <label for="right-label" class="right inline">Other Town</label> 
 
    <input type="text" id="right-label" name="alt_town"> 
 
</div>

来源

2015-07-13 10:14:36

'肘节（）'用布尔总是优选'隐藏（）'/'显示（）'对。按照@A。沃尔夫。 –

@TrueBlueAussie是...错过了..并且正在更新它 –

谢谢，这正是我需要:) – Thommie

使用jQuery绑定处理程序（所以删除onchange="otherTown()"）。然后使用jQuery toggle()方法：

$(function() { // shothand for document ready pseudo event, if needed 
    $('#town').on('change', function() { 
     $("#alt_town").toggle(this.value === "4"); 
    }); 
});

来源

2015-07-13 10:16:15

可以使用此：

$('#town').change(function() { 
    if($(this).val()==parseInt("4")) 
     { 
     $('#alt_town').show(); 
     }else{ 
      $('#alt_town').hide(); 
     } 
    });

来源

2015-07-13 10:34:13

jQuery隐藏/显示元素取决于html选择值

HTML

JS

回答

相关问题