2013-10-31 31 views
0

好吧,我想写一个脚本,将显示和隐藏基于用户选择项目的脚本。我能够弄清楚如何用无线电组来做到这一点,但当涉及到一个选择的项目,我只是不知道。任何人都有一个想法,我在这里做错了什么?选择选项更改触发附加代码

我的jQuery

$('select#contact').change(function() { 
    var isPhone = $('#phone').is(':selected'); 
    var isEmail = $('#email').is(':selected'); 
    $('#cell').toggleClass('req', isPhone); 

    if (isPhone === true) { 
     $('#phoneNum').animate({'height':'show'}, 500); 
    } else if (isPhone === false){ 
     $('#phoneNum').animate({'height':'hide'}, 200); 
    } 
    $('#Remail').toggleClass('req', isEmail); 

    if (isEmail === true) { 
     $('#emailAdd').animate({'height':'show'}, 500); 
    } else if (isEmail === false){ 
     $('#emailAdd').animate({'height':'hide'}, 200); 
    } 
}); 

我的HTML

<p> 
    <label for="contact">How Would You Like Us To Contact You?</label> 
    <select id="contact" name="contact" class="req"> 
     <option></option> 
     <option id="phone">By Phone</option> 
     <option id="email">By Email</option> 
    </select> 
</p> 
<p id="phoneNum"> 
    <label for="cell">Best Phone Number</label> 
    <input id="cell" name="cell" type="tel" placeholder="e.g. 555-555-5555" class=""/> 
</p> 
<p id="emailAdd"> 
    <label for="Remail">Email</label> 
    <input id="Remail" name="Remail" placeholder="[email protected]" type="email" class=""/> 
</p> 

回答

0

想通了:

$('select#contact').change(function() { 
    var isPhone = $(this).find("option:selected").is('#phone'); 
    var isEmail = $(this).find("option:selected").is('#email'); 
    $('#cell').toggleClass('req', isPhone); 

    if (isPhone === true) { 
     $('#phoneNum').animate({'height':'show'}, 500); 
    } else if (isPhone === false){ 
     $('#phoneNum').animate({'height':'hide'}, 200); 
    } 
    $('#Remail').toggleClass('req', isEmail); 

    if (isEmail === true) { 
     $('#emailAdd').animate({'height':'show'}, 500); 
    } else if (isEmail === false){ 
     $('#emailAdd').animate({'height':'hide'}, 200); 
    } 
});