当选择某个值时显示隐藏的div

我有通过jquery生成的动态字段。我可以通过选择功能触发器.change显示这些字段。每个选择字段有三个选项Biology，Calculus和Others-Not listed。当选择Others-not listed且值为3时，该功能将显示一个隐藏的div。我的问题是，如果有两个选择字段，并且选择了Others-not listed选项，它将显示所有其他选择的隐藏div。我想只显示这个隐藏的div为特定的选择字段。 JSFIDDLE 当选择某个值时显示隐藏的div

$(document).ready(function() { 
    $('select').change(function() { 
     var option = $(this).val(); 
     showFields(option); 
     return false; 
    }); 
    function showFields(option){ 

     var content = ''; 
     for (var i = 1; i <= option; i++){ 
      content += '<div id="course_' + i + '"><label>Course # ' + i + '</label><br /><label>Course Name:</label> <select id="coursename_' + i + '" name="coursename_' + i + '" class="ddlcss"><option value="">--- Select ---</option>"' 
      content += '<option value="1">Biology</option>'; content += '<option value="2">Calculus</option>'; content += '<option value="3">Other - Not Listed</option>'; '"'; 

      content += '</select><div class="hideNewCourse" style="display:none;"><label for="newCourse_'+i+'">Add Course Name to List:</label><input type="text" id="newCourse_'+i+'" name="newCourse_'+i+'"/></div></br></div>'; 

      $(document).on('change',"#coursename_"+i, function(){ 
       if ($(this).val() == "3"){ 
        $(".hideNewCourse").show();  
       }else{ 
        $(".hideNewCourse").hide(); 
       } 
      }); 

     } 
     $('#course_catalog').html(content); 
    } 
});

来源

2013-12-09 techAddict82

你反正委托的事件。而不是将事件绑定到每个元素，具体只使用Attribute starts with选择器。

$(document).on('change',"#coursename_"+i, function(){

可改为

$(document).on('change',"[id^=coursename_]", function() {

并将其移出该showFields方法

并且示出和隐藏包含于容器中的特定元素，可以使用最接近的混合，然后到达父级，然后找到该对应块的hideContainer div。然后

$(".hideNewCourse").show();

将变更为

$(this).closest('div').find(".hideNewCourse")

Check Fiddle

来源

2013-12-09 20:44:06

这是有帮助。我读了更多关于它。将使用此。 – techAddict82

你超出了我的要求。谢谢。 – techAddict82

@ techAddict82 ..很高兴有帮助:) –

尝试使用.next()功能，所以它只能抓住下一个对象，而不是所有的人：

所以不是这样的：

$(".hideNewCourse").show();

这样做：

 $(this).next(".hideNewCourse").show();

而且你也会这样做隐藏：

 $(this).next(".hideNewCourse").hide();

来源

2013-12-09 20:42:09

更改代码，选择字段：

if ($(this).val() == "3") { 
    $(this).parent().find(".hideNewCourse").show(); 
} else { 
    $(this).parent().find(".hideNewCourse").hide(); 
}

jsFiddle example

在你的代码，$(".hideNewCourse")会显示或隐藏所有该类元素。通过使用$(this).parent().find(".hideNewCourse")，您只能选择相对于已更改的选择的元素。

来源

2013-12-09 20:42:32 j08691

+1思想一样，很少发生:) – Praveen

$(".hideNewCourse").show();

上面代表了这个类的所有元素。

你必须要选择像

$(this).parent().find(".hideNewCourse").show();

然后，

$(document).on('change',"#coursename_"+i, function(){ 
       if ($(this).val() == "3"){ 
        $(this).parent().find(".hideNewCourse").show();  
       }else{ 
        $(this).parent().find(".hideNewCourse").hide(); 
       } 
      });

Fiddle

来源

2013-12-09 20:42:34 Praveen

当选择某个值时显示隐藏的div

回答

相关问题