JQuery的顯示默認事業部只有

Question

我會想顯示事業部基礎上下拉列表中選擇默認值，但不能作品，它只能顯示和隱藏當我在降更改選定值下降。我嘗試使用Load函數，但它會顯示所有Div。任何人都可以指導我？

下面是我的代碼：

<script> 

    $('#dropDown').load(function() { 
     $('.drop-down-show-hide').hide(); 
     $('#' + this.value).show(); 
    }); 

    $('#dropDown').change(function() { 
     $('.drop-down-show-hide').hide(); 
     $('#' + this.value).show(); 
    }); 

</script> 

View.cshtml：

<div id="Single_Line" class="drop-down-show-hide"> 
    <br /> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.MaxChar) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.MaxChar) 
     @Html.ValidationMessageFor(model => model.Qext_Text) 
    </div> 
</div> 

<div id="Multiple_Line" class="drop-down-show-hide"> 
    <br /> 
    <div class="editor-label"> 
     @Html.LabelFor(model => model.NumberOfLines) 
    </div> 
    <div class="editor-field"> 
     @Html.EditorFor(model => model.NumberOfLines) 
     @Html.ValidationMessageFor(model => model.NumberOfLines) 
    </div> 
</div> 

下拉列表：

@Html.DropDownListFor(model => model.Question_Type, new SelectList(
          new List<Object>{ 

           new { value ="Single Line" , text = "Single_Line" }, 
           new { value ="Multiple Line" , text = "Multiple_Line" },       
          }, 
          "text", 
          "value", 
         0), new { @id = "dropDown" }) 

Answer 1

使用波紋管代碼。在$(document).ready()函數中添加$('#Single_Line').show();。

<script> 

    // Add this line of code if you want to show dive after DOM load. 
    $(window).load(function(){ 

    $('.drop-down-show-hide').hide(); 
    $('#'+$('#dropDown').val()).show(); 

    }); 

</script> 

第二個選項

<script> 
    $(document).ready(function(){ 

    $('.drop-down-show-hide').hide(); 
    $('#'+$('#dropDown').val()).show(); 

    $('#dropDown').load(function() { 
     $('.drop-down-show-hide').hide(); 
     $('#' + this.value).show(); 
    }); 

    $('#dropDown').change(function() { 
     $('.drop-down-show-hide').hide(); 
     $('#' + this.value).show(); 
    });  
    }); 
</script>