基于选择的选项淡入div

我有一个webform有几个选项。如果某人选择某个选项，则包含更多详细信息的div将淡入以显示信息。问题是当选择选项的div不会淡入。我有类似的代码在窗体的另一部分，它工作正常。我不确定我错了什么。基于选择的选项淡入div

下面是代码：

FORM HTML

<label for="CAT_Custom_265083_93822">If completing the training through your workplace, Recruitment Agency or JSA - please provide their details: </label> 
    <select name="CAT_Custom_265083_93822 employer-ra-jsa" id="CAT_Custom_265083_93822" class="cat_dropdown"> 
    <option value=" ">-- Please select --</option> 
    <option value="Employer">Employer</option> 
    <option value="Recruitment Agency">Recruitment Agency</option> 
    <option value="JSA">JSA</option> 
    <option value="Not Applicable">Not Applicable</option> 
    </select> 

<div class="employer-jsa"> 
    <!-- CODE TO FADE IN --> 
</div>

JS FOR FORM

$(function() { 

    $('.employer-jsa').hide(); 

$('.employer-ra-jsa').change(function() { 
    if ($('.employer-ra-jsa option:selected').text() == "Employer"){ 
     $('.employer-jsa').fadeIn("slow"); 
    } 
    else if ($('.employer-ra-jsa option:selected').text() == "Recruitment-Agency"){ 
     $('.employer-jsa').fadeIn("slow"); 
    } 
    else if ($('.employer-ra-jsa option:selected').text() == "JSA"){ 
     $('.employer-jsa').fadeIn("slow"); 
    } 
    else { 
     $('.employer-jsa').fadeOut("slow"); 
    } 
}); 


});

我有什么错我的代码？没有错误抛出，div只是不褪色。

注意：我正在使用jQuery 1.8.3。

来源

2014-02-08 L84

你有employer-ra-jsa这显然是假设是一个类，在选择的名称属性中

<select name="CAT_Custom_265083_93822" id="CAT_Custom_265083_93822" class="cat_dropdown employer-ra-jsa"> 
    <option value=" ">-- Please select --</option> 
    <option value="Employer">Employer</option> 
    <option value="Recruitment Agency">Recruitment Agency</option> 
    <option value="JSA">JSA</option> 
    <option value="Not Applicable">Not Applicable</option> 
    </select>

来源

2014-02-08 02:48:35 Musa

我想我一直在寻找长期的代码。简单的错误。谢谢您的帮助。 – L84

我在您的html的任何地方都看不到employer-ra-jsa类。我认为您需要添加课程或将您的选择器更改为.cat_dropdown。

来源

2014-02-08 02:48:12 jeremyjjbrown

选择器是错误的。在您的标记中没有employer-ra-jsa类的元素，employer-ra-jsa是元素的name属性的一部分。

$('.cat_dropdown').change(function() {

作为一个建议，你也可以使用select元素的selectedIndex财产，而不是使用.text()方法：

$('.cat_dropdown').change(function() { 
    if ($.inArray(this.selectedIndex, [1, 2, 3]) > -1) 
     $('.employer-jsa').fadeIn(); 
    else 
     $('.employer-jsa').fadeOut(); 
});

http://jsfiddle.net/Tf2aK/

来源

2014-02-08 02:48:26 undefined

在这一行中，name属性中有“employer-ra-jsa”。它需要的类属性：

<select name="CAT_Custom_265083_93822 employer-ra-jsa" id="CAT_Custom_265083_93822" class="cat_dropdown">

您选择不工作，因为这一点。

此外，您应该存储$('.employer-jsa')，因此您不必为它查询DOM。所以这样做：

var $employerJsa = $('.employer-jsa');

然后用那个代替jQuery选择器。在函数内声明var第一件事。

来源

2014-02-08 02:53:04 danwarfel

基于选择的选项淡入div

回答

相关问题