Javascript代码和HTML标记

我正在设置一个由输入，复选框和表单提交表单组成的页面。Javascript代码和HTML标记

当我加载页面，不管我以前保存的设置，它说明不了什么下面<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>

来源

2014-10-20 Fede Rossi

你不应该预先选择的每一个选项 – Bobby 2014-10-20 13:45:01

只是触发页面加载'change'事件。 – 2014-10-20 13:46:39

“我以前保存的设置” - 如何保存这些设置？直接到一个文件？到数据库？您发布的脚本仅在用户更改'＃.required-entry'时执行，即使这样，它仍会根据当前选择进行操作，而不会检索任何“已保存”的内容。 – Teemu 2014-10-20 13:51:14

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>

来源

2014-10-20 13:51:08 rafaelcastrocouto

我用你的代码来创建一个小提琴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(); 
    } 
}); 
});

来源

2014-10-20 13:47:43 Beckers

这是一条评论，而不是答案。 – 2014-10-20 15:39:46

Javascript代码和HTML标记

回答

相关问题