Question

我有一个webform，有几个选项。如果某人选择某个选项，则包含更多详细信息的div将淡入该信息。问题是当选择选项时div不会淡入。我在表单的另一部分有类似的代码，它工作正常。我不确定我的错误。

以下是代码：

表单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。

Answer 1

你有employer-ra-jsa显然是一个类，在select的名称属性中

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

Answer 2

我的html中没有看到employer-ra-jsa类。我认为您需要添加课程或将您的选择器更改为.cat_dropdown。

Answer 3

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

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

作为建议，您还可以使用selectedIndex元素的select属性，而不是使用.text()方法：

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

http://jsfiddle.net/Tf2aK/

Answer 4

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

<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第一个东西。

根据选择的选项淡入div

4 个答案: