Javascript代碼和HTML標記

Question

我正在設置一個由輸入，複選框和表單提交表單組成的頁面。

當我加載頁面，不管我以前保存的設置，它說明不了什麼下面<select class="required-entry">

如何編輯的JavaScript代碼，使其正常工作？

這裏是JavaScript：

$(function() {  
$('.required-entry').change(function(){ // use class or use $('select') 
    if ($(this).val() == "3" || $(this).val() == "2") { 
     $("#attach").show(); 

    } else { 
     $("#attach").hide(); 
    } 
}); 
}); 
$(function() {  
$('.required-entry').change(function(){ // use class or use $('select') 
    if ($(this).val() == "1" || $(this).val() == "3") { 
       $("#attach2").show(); 
    } else { 
        $("#attach2").hide(); 
    } 
}); 
}); 

下面是HTML代碼：

<select class="required-entry"> 
<option value="0" selected="true">Show nothing</option> 
<option value="2" selected="true">WhatsApp only</option> 
<option value="1" selected="true">E-mail only</option> 
<option value="3" selected="true">WhatsApp + E-mail</option> 
</select> 

<div id="attach" style="display:none;" >WhatsApp description</div> 
<div id="attach2" style="display:none;" >E-mail description</div> 

Answer 1

SOLUTION

你不應該預先選擇的每一個選項，你應該觸發頁面加載改變事件;

$(function() {  
 
    
 
    $('.required-entry').change(function(){  
 
    var val = $(this).val(); 
 

 
    if (val == "3" || val == "2") $("#attach").show(); 
 
    else $("#attach").hide(); 
 
     
 
    if (val == "1" || val == "3") $("#attach2").show(); 
 
    else $("#attach2").hide(); 
 
    
 
    }); 
 
    
 
    $('.required-entry').trigger('change'); 
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <select class="required-entry"> 
 
     <option value="0" selected="true">Show nothing</option> 
 
     <option value="2">WhatsApp only</option> 
 
     <option value="1">E-mail only</option> 
 
     <option value="3">WhatsApp + E-mail</option> 
 
    </select> 
 

 
    <div id="attach" style="display:none;" >WhatsApp description</div> 
 
    <div id="attach2" style="display:none;" >E-mail description</div>

Answer 2

我用你的代碼來創建一個小提琴here。它似乎工作正常。你包括jQuery？你看到你的控制檯有任何錯誤嗎？

$(function() {  
$('.required-entry').change(function(){ // use class or use $('select') 
    if ($(this).val() == "3" || $(this).val() == "2") { 
     $("#attach").show(); 

    } else { 
     $("#attach").hide(); 
    } 
}); 
}); 
$(function() {  
$('.required-entry').change(function(){ // use class or use $('select') 
    if ($(this).val() == "1" || $(this).val() == "3") { 
       $("#attach2").show(); 
    } else { 
        $("#attach2").hide(); 
    } 
}); 
});