[英]Hide div based on selected dropdown
This code works fine when you are now creating a new page. 现在创建新页面时,此代码可以正常工作。 Selecting a dropdown will show or hide as decorated by the markup.
选择一个下拉列表将显示或隐藏为标记所装饰的位置。 The problem is in an edit page with a default selected Id like Id 3 I want the div decorated with 3 to be hidden on page load.
问题是在编辑页面中,其默认选择的ID如ID 3,我希望在页面加载时隐藏带有3的div。 I am completely at sea with javascript and jquery.
我完全在使用javascript和jquery。
<div class="form-group">
<label class="control-label col-md-2" for="ArticleCategoryId">Menu Category</label>
<div class="col-md-10">
<select class="chooseOption form-control" id="ArticleCategoryId" name="ArticleCategoryId">
<option value="1">pages</option>
<option value="2">about</option>
<option selected="selected" value="3">project</option>
<option value="4">gallery</option>
<option value="5">news</option>
<option value="6">events</option>
<option value="7">FAQS</option>
<option value="8">Jobs</option>
<option value="9">Documents</option>
<option value="10">Clients</option>
</select>
<div class="form-group ArticleCategoryId 3">
<label class="control-label col-md-2" for="ArticleOnDate">Start Date</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field Start Date must be a date." id="ArticleOnDate" name="ArticleOnDate" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ArticleOnDate" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group ArticleCategoryId 1">
<label class="control-label col-md-2" for="ArtilceOnTime">On Time</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ArtilceOnTime" name="ArtilceOnTime" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ArtilceOnTime" data-valmsg-replace="true"></span>
</div>
</div>
Below is the jquery snippet 以下是jquery片段
<script type="text/javascript">
jQuery(".optionName").hide();
jQuery("document").ready(function () { /// have to wait till after the document loads to run these things
jQuery("select.chooseOption").change(function () {
jQuery("." + this.id).hide();
var thisValue = jQuery(this).val();
if (thisValue != "")
jQuery("." + thisValue).show();
});
});
</script>
This being an edit page I want "<div class="form-group ArticleCategoryId 3">....</div>
to be hidden on page load since item Id 3 has been selected but the other should show. Any help will be appreciated 这是一个编辑页面,我希望在页面加载时隐藏
"<div class="form-group ArticleCategoryId 3">....</div>
,因为已选择项目ID 3,但其他项目应显示。任何帮助被赞赏
Having components classes given such as "ArticleCategoryId 1" is a bad idea. 给出诸如“ ArticleCategoryId 1”之类的组件类是一个坏主意。
You could have sth like 你可能会喜欢
<div class="form-group editable-category" data-category-id="1">
<label class="control-label col-md-2" for="ArtilceOnTime">On Time</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ArtilceOnTime" name="ArtilceOnTime" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ArtilceOnTime" data-valmsg-replace="true"></span>
</div>
</div>
and css 和CSS
.editable-category{
display:none;
}
.editable-category.active{
display:block;
}
and js as follow 和js如下
$(document).ready(function(){
$('select.chooseOption').on('change',function(){
var thisValue = $(this).find('option:selected').val();
if(thisValue){
$('.editable-category.active').removeClass('active');
$('.editable-category[data-category-id="'+thisValue+'"]').addClass('active');
}
}).trigger('change');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.