根據所選下拉菜單隱藏div

Question

當您正在創建新頁面時，此代碼正常工作。選擇下拉菜單將顯示或隱藏標記所修飾的內容。問題出在一個編輯頁面，默認選中Id，比如Id 3我想用3裝飾的div在頁面加載時隱藏。我完全用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> 

下面是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> 

這是一個編輯的網頁我想"<div class="form-group ArticleCategoryId 3">....</div>要在頁面加載隱藏因爲項目編號3已經被選擇，但其他應顯示。任何幫助將不勝感激

Answer 1

具有諸如「ArticleCategoryId 1」給出的組件類是一個壞主意。

你可以有某事像

<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> 

和CSS

.editable-category{ 
    display:none; 
} 

.editable-category.active{ 
    display:block; 
} 

和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'); 

});