Question

所以我的问题是，我正在尝试创建3或4级选择选项，下一个选项由前一个选项决定，而select函数是从mysql调用生成的，这并不重要。正如您所见，A1> B1＆gt; C1可以工作，但A2＆gt; B2＆gt;？什么都不做

 $("#category").change(function() {

    if ($(this).val() == "A1") { $("#A1").show(); }
     else { $("#A1").hide(); } 

    if ($(this).val() == "A2") { $("#A2").show(); }
     else { $("#A2").hide(); } 
 });

 $("#subcategory").change(function() {

    if ($(this).val() == "B1") { $("#B1").show(); }
     else { $("#B1").hide(); } 

    if ($(this).val() == "B2") {  $("#B2").show(); }
     else {  $("#B2").hide(); } 
 });

 $("#nextcategory").change(function() {

    if ($(this).val() == "C1") { $("#C1").show(); }
     else { $("#C1").hide(); } 

    if ($(this).val() == "C2") {  $("#C2").show(); }
     else {  $("#C2").hide(); } 
 });

Answer 1

您多次使用相同的id。

ID必须是唯一的。

更改

$("#subcategory").change(function() {
$("#nextcategory").change(function() {

到

$("select[name='subcategory']").change(function() {...
$("select[name='nextcategory']").change(function() {...

写：

$("#category").change(function () {
     $("#A1,#A2").hide();
     if ($(this).val() == "A1") {
         $("#A1").show();
     } else if ($(this).val() == "A2") {
         $("#A2").show();
     }
 });

 $("select[name='subcategory']").change(function () {
     $("#B1,#B2").hide();
     if ($(this).val() == "B1") {
         $("#B1").show();
     } else if ($(this).val() == "B2") {
         $("#B2").show();
     }
 });
 $("select[name='nextcategory']").change(function () {
     $("#C1,#C2").hide();
     if ($(this).val() == "C1") {
         $("#C1").show();
     } else if ($(this).val() == "C2") {
         $("#C2").show();
     }
 });

DEMO here.

Answer 2

似乎在标题中遗漏了这个，我加入了它的工作漂亮!!!!

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

显示和隐藏divs jsfiddle问题

2 个答案: