基於選擇的選項淡入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

回答

相關問題