[英]Hide a div upon option change in select dropdown in HTML using jQuery
To get straight to the point here's I want to accomplish. 为了直截了当,我想完成这一点。 I want to hide a certain DIV when a certain <OPTION>
in <SELECT>
was selected. 我想在<SELECT>
的某个<OPTION>
时隐藏某个DIV。
Here's my HTML markup: 这是我的HTML标记:
THE SELECT 选择
<select name="cutoffselect" id="cutoff" class="text ui-widget-content ui-corner-all" style="padding-right: 80px;">
<option value="">Choose One</option>
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="semimonthly">Semi Monthly</option>
<option value="monthly">Monthly</option>
</select>
and the DIV I want to hide if DAILY was selected. 如果选择了DAILY,我想隐藏DIV。
THE PERIOD 时期
<div class="input-group-addon" style="width:20%;" title='Filter By' id = "perioddiv">
<!--PERIOD-->
<label for="period" style="padding-right: 10px;margin-top:7px;" visible="false">Period</label>
<select name="period" id="period" class="text ui-widget-content ui-corner-all">
<option value="">Choose Period</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
<!--PERIOD-->
</div>
I have tried using different query but I cannot do what I want. 我尝试过使用不同的查询,但我不能做我想做的事。 Here's the query I used but its not functioning and if I may ask for another jQuery suggestion that actually might work the greater. 这是我使用的查询,但它不起作用,如果我可能要求另一个jQuery建议实际上可能工作更大。 Thanks to all in advance. 感谢所有提前。
HERE'S THE QUERY 这是查询
<script type="text/javascript">
$("#cutoffselect").change(function(){
$("#perioddiv div:eq(" + $(this).attr("selectedIndex") + ")").show();
});
</script>
this will do it: 这样做:
<script type="text/javascript">
$(function(){
$("#cutoff").change(function(){
if($(this).val()=='daily'){
$('#perioddiv').hide();
}
else{
$('#perioddiv').show();
}
});
});
</script>
here is your answer. 这是你的答案。
$('#cutoff').change(function () { $('#cutoff')。change(function(){
if ($('#cutoff').find(":selected").text() == 'Daily') {
$('#perioddiv').hide();
} else {
$('#perioddiv').show();
}
});
jsfiddle: 的jsfiddle:
http://jsfiddle.net/LNMW3/
To hide div with id=perioddiv
when daily
option selected, you can try below jquery: 要在选择daily
选项时隐藏id=perioddiv
div,您可以在jquery下面尝试:
<script type="text/javascript">
// bind change event using '#cutoff' as select id="cutoff"
$("#cutoff").change(function(){
// hide if selected value is "daily"
if($(this).val() == "daily")
$("#perioddiv").hide();
else
$("#perioddiv").show();
});
</script>
Check if the selected option is daily and then hide the div. 检查所选选项是否为每日,然后隐藏div。
$(document).ready(function(){
$('#cutoff').change(function(){
if($('#cutoff option:selected').val() == 'daily')
{
$('#perioddiv').hide();
}
else
{
$('#perioddiv').show();
}
});
});
try this: 尝试这个:
$('#period').change(function(){
// check if "daily" is selected
if($(this).val() == "daily") {
$('#perioddiv').hide();
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.