我需要帮助我有子选项问题的解决方法？

Question

选择宝马，然后选择选项m5选项。 m5没有显示如何解决此问题？

我需要选择宝马和子选项m5吗？

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select").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>
        <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>

Answer 1

您的问题是因为您将选择隐藏在.change函数中。当前编写方式，.change将针对页面上的每个选择触发。根据您的问题，这不是您想要的。

如果您不想隐藏第二个框，则需要为第一个选择框分配ID和类，或者可以使用：first选择器。

示例：此示例显示：first选择器。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select:first").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>
        <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>

或者，您可以为选择项分配一个ID /类别。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(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>

有20种方法可以给这只猫换皮，您只需要稍微限制$（select）范围即可。