此代码很好用,显示:无,在选择类别显示子类别之后。
但是我需要删除所有子类别并在选择它时显示。
从html删除并显示何时选中它如何提出想法。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#typeSelect").change(function(){
$(this).find("option:selected").each(function(){
var optionValue = $(this).attr("value");
if(optionValue){
$(".box").not("." + optionValue).hide();
$("." + optionValue).show();
} else{
$(".box").hide();
}
});
}).change();
});
</script>
<div>
<select id="typeSelect">
<option value="">select brand</option>
<option value="2594">bmw</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
<div class="2594 box">
<select name="xfield[bmw]">
<option value="0">114</option>
<option value="1">116</option>
<option value="2">118</option>
<option value="3">120</option>
<option value="4">123</option>
<option value="5">125</option>
<option value="6">128</option>
<option value="7">130</option>
<option value="8">135</option>
<option value="9">214</option>
<option value="10">216</option>
<option value="11">218</option>
<option value="12">220</option>
<option value="13">225</option>
<option value="14">228</option>
<option value="15">315</option>
<option value="16">316</option>
<option value="17">318</option>
<option value="18">320</option>
<option value="19">320 GranTurismo</option>
<option value="20">323</option>
<option value="21">324</option>
<option value="22">325</option>
<option value="23">328</option>
<option value="24">330</option>
<option value="25">335</option>
<option value="26">418</option>
<option value="27">420</option>
<option value="28">425</option>
<option value="29">428</option>
<option value="30">430</option>
<option value="31">435</option>
<option value="32">518</option>
<option value="33">520</option>
<option value="34">523</option>
<option value="35">524</option>
<option value="36">525</option>
<option value="37">528</option>
<option value="38">530</option>
<option value="39">535</option>
<option value="40">540</option>
<option value="41">545</option>
<option value="42">550</option>
<option value="43">628</option>
<option value="44">630</option>
<option value="45">633</option>
<option value="46">635</option>
<option value="47">640</option>
<option value="48">645</option>
<option value="49">650</option>
<option value="50">725</option>
<option value="51">728</option>
<option value="52">730</option>
<option value="53">732</option>
<option value="54">735</option>
<option value="55">740</option>
<option value="56">745</option>
<option value="57">750</option>
<option value="58">760</option>
<option value="59">840</option>
<option value="60">850</option>
<option value="61">i3</option>
<option value="62">i8</option>
<option value="63">M1</option>
<option value="64">M135</option>
<option value="65">M235</option>
<option value="66">M3</option>
<option value="67">M4</option>
<option value="68">M5</option>
<option value="69">M550</option>
<option value="70">M6</option>
<option value="71">X1</option>
<option value="72">X3</option>
<option value="73">X4</option>
<option value="74">X5</option>
<option value="75">X6</option>
<option value="76">X6M</option>
<option value="77">Z1</option>
<option value="78">Z3</option>
<option value="79">Z4</option>
<option value="80">Z8</option>
</select>
</div>
<div class="green box">You have selected <strong>green option</strong> so i am here</div>
<div class="blue box">You have selected <strong>blue option</strong> so i am here</div>