Question

当您正在创建新页面时，此代码可以正常工作。选择下拉列表将显示或隐藏标记所装饰的内容。问题是在一个编辑页面中，默认选择Id，如Id 3，我想在页面加载时隐藏装饰有3的div。我完全在海上使用javascript和jquery。

output <- sub("\\?(?=([^'\\\\]*(\\\\.|'([^'\\\\]*\\\\.)*[^'\\\\]*'))*[^']*$)",
              "!", "This is a test string?", perl = TRUE)

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

这是一个编辑页面，我希望<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>在页面加载时隐藏，因为项目ID 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');

});

根据选定的下拉列表隐藏div

1 个答案: