如何删除和显示选择选项子类别

时间:2019-02-11 16:54:13

标签: javascript html

此代码很好用,显示:无,在选择类别显示子类别之后。

但是我需要删除所有子类别并在选择它时显示。

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

0 个答案:

没有答案