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>