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

我用您的代碼在這里創建了一個小提琴。 它似乎工作正常。 你包括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();
    }
});
});

Answer 2

解

您不應該預先選擇每個選項，而應該在頁面加載時觸發更改事件。

 $(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>