Question

如何根据第一个下拉菜单刷新第二个隐藏下拉菜单？当我从第一个下拉列表中选择一个选项时，第二个下拉列表出现，从第二个下拉列表中选择后我得到了文本内容但是当我从第一个下拉列表中选择一个选项时，文本内容无法隐藏。下一个文本内容显示在第一个内容之下。演示http://jsfiddle.net/pratyush141/VtFCR/

<select id="circle">
<option value="">select </option>
<option value="Bihar">Bihar </option>
<option value="Assam">Assam</option>
</select>



<select id="assam" style="display:none" >
<option value="">Pick one</option>
<option value="1">Top up</option>
<option value="2">sms</option>
<option value="3">data</option>
</select>
<select id="bihar" style="display:none">
<option value="">Pick one</option>
<option value="1">data</option>
<option value="2">sms</option>
<option value="3">top up</option>
</select>
<div id="brtopup" style="display:none">topup</div>
<div id="brsms" style="display:none">sms</div>
<div id="brdata" style="display:none">data</div>
<div id="astopup" style="display:none">topup</div>
<div id="assms" style="display:none">sms</div>
<div id="asdata" style="display:none">data</div>


$("#circle").change(function() {
var control = $(this);

if (control.val() == "Assam") {
    $("#assam").show();   
} else { 
 $("#assam").hide();   
}
if (control.val() == "Bihar") {
    $("#bihar").show();   
} else { 
 $("#bihar").hide();   
}
 });


$("#bihar").change(function() {
var control = $(this);

if (control.val() == "1") {
    $("#brdata").show();   
} else { 
 $("#brdata").hide();   
}
if (control.val() == "2") {
    $("#brsms").show();   
} else { 
 $("#brsms").hide();   
}
if (control.val() == "3") {
    $("#brtopup").show();   
} else { 
 $("#brtopup").hide();   
}


 });
 $("#assam").change(function() {
var control = $(this);

if (control.val() == "1") {
    $("#astopup").show();   
} else { 
 $("#astopup").hide();   
}
if (control.val() == "2") {
    $("#assms").show();   
} else { 
 $("#assms").hide();   
}
if (control.val() == "3") {
    $("#asdata").show();   
} else { 
 $("#asdata").hide();   
}

$('#assam').trigger("chosen:updated");
 });

演示http://jsfiddle.net/pratyush141/VtFCR/

Answer 1

在JS中进行这些更改

$("#circle").change(function() {
    var control = $(this);

    if (control.val() == "Assam") {
        $("#assam").show();   
    } else { 
        $("#assam").hide(); 
        $("#astopup").hide();//add three lines
        $("#assms").hide();
        $("#asdata").hide();
    }
    if (control.val() == "Bihar") {
        $("#bihar").show();   
    } else { 
        $("#bihar").hide();  
        $("#brtopup").hide();//add three lines
        $("#brsms").hide();
        $("#brdata").hide();
    }
     });


    $("#bihar").change(function() {
    var control = $(this);

    if (control.val() == "1") {
        $("#brdata").show();   
    } else { 
     $("#brdata").hide();   
    }
if (control.val() == "2") {
        $("#brsms").show();   
    } else { 
     $("#brsms").hide();   
    }
if (control.val() == "3") {
        $("#brtopup").show();   
    } else { 
     $("#brtopup").hide();   
    }


 });
$("#assam").change(function() {
    var control = $(this);

    if (control.val() == "1") {
        $("#astopup").show();   
    } else { 
     $("#astopup").hide();   
    }
if (control.val() == "2") {
        $("#assms").show();   
    } else { 
     $("#assms").hide();   
    }
if (control.val() == "3") {
        $("#asdata").show();   
    } else { 
     $("#asdata").hide();   
    }

$('#assam').trigger("chosen:updated");
 });

Answer 2

将一个类添加到assam和bihar的不同组中：

<div id="brtopup" class ="bihar" style="display:none">topup</div>
<div id="brsms" class ="bihar" style="display:none">sms</div>
<div id="brdata" class ="bihar" style="display:none">data</div>
<div id="astopup" class ="assam" style="display:none">topup</div>
<div id="assms" class ="assam" style="display:none">sms</div>
<div id="asdata" class ="assam" style="display:none">data</div>

然后你可以立即隐藏整个班组：

if (control.val() == "Assam") {
        $("#assam").show();   
    } else { 
     $("#assam").hide();
     $(".assam").hide();
    }
    if (control.val() == "Bihar") {
        $("#bihar").show();   
    } else { 
     $("#bihar").hide();
     $(".bihar").hide();
    }
     });

如何根据第一个刷新第二个隐藏的下拉菜单

2 个答案:

jsfiddle demo here