オプションを選択し、デフォルト

Question

デフォルト値content1は表示されませんが、表示されません "テキスト・デフォルト・ショー"

私を助けてください..

jQuery(document).ready(function($) { 
 
    jQuery('#select123').change(function() { 
 
    jQuery('.content123').hide(); 
 
    jQuery('#' + jQuery(this).val()).show(); 
 
    }); 
 
});

div.content123 { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select123"> 
 
    <option value="content1">content1</option> 
 

 
    <option value="content2">content2</option> 
 

 
    <option value="content3">content3</option> 
 
    <option value="content4">content4</option> 
 
</select> 
 
<div id="content1" class="content123"> 
 
    text defult show 
 
</div> 
 

 
<div id="content2" class="content123"> 
 
    contentttttttt 
 
</div> 
 
<div id="content3" class="content123"> 
 
    content3 
 
</div> 
 
<div id="content4" class="content123"> 
 
    content4 
 
</div>

Answer 1

デフォルトのdoesn CSSがすべてのDIVを隠すために表示されません。ページがロードされたときにselectにクリックイベントを発生させると、デフォルトが表示されます。

jQuery(document).ready(function($) { 
 
    jQuery('#select123').change(function() { 
 
    jQuery('.content123').hide(); 
 
    jQuery('#' + jQuery(this).val()).show(); 
 
    }).trigger("change"); 
 
});

div.content123 { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select123"> 
 
    <option value="content1">content1</option> 
 

 
    <option value="content2">content2</option> 
 

 
    <option value="content3">content3</option> 
 
    <option value="content4">content4</option> 
 
</select> 
 
<div id="content1" class="content123"> 
 
    text defult show 
 
</div> 
 

 
<div id="content2" class="content123"> 
 
    contentttttttt 
 
</div> 
 
<div id="content3" class="content123"> 
 
    content3 
 
</div> 
 
<div id="content4" class="content123"> 
 
    content4 
 
</div>

Answer 2

あなたはselectのデフォルトをしたいオプションに属性selected="selected"を追加する必要があります。 は、次にスクリプト内で、あなたはStackOverflowのにdiv

$(document).ready(function() { 
 
    $('#' + $("#select123").val()).show(); 
 
    
 
    $('#select123').change(function(){ 
 
    \t \t $('.content123').hide(); 
 
    \t \t $('#' + $(this).val()).show(); 
 
    \t }); 
 
    });

div.content123 { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select123"> 
 
    \t <option value="content1" selected="selected">content1</option> 
 

 
    \t <option value="content2">content2</option> 
 
    \t 
 
    <option value="content3">content3</option> 
 
    \t <option value="content4">content4</option> 
 
    </select> 
 
    <div id="content1" class="content123"> 
 
    \t text defult show 
 
    </div> 
 

 
    <div id="content2" class="content123"> 
 
    \t contentttttttt 
 
    </div> 
 
    <div id="content3" class="content123"> 
 
    \t content3 
 
    </div> 
 
    <div id="content4" class="content123"> 
 
    \t content4 
 
    </div>