2

私は最初のドロップダウンにこのコードを持っています：

<td align="left" style="padding-bottom:10px">
    <select name="category" id="category">
        <option selected value="Please Select">Please Select</option>           
        <option value="Cars">Cars</option>
        <option value="Trucks">Trucks</option>
        <option value="Motorcycles">Motorcycles</option>
        <option value="Boats">Boats</option>
    </select>
</td>

また、前のオプションの色が異なる2番目のカテゴリもあります。例：[車]を選択すると、2番目のドロップダウンが表示され、[赤]、[緑]、または[青]が選択されますが、[トラック]を選択すると、2番目のドロップダウンが表示され、[黒]または[白]オプションのみが選択されます。

2番目のドロップダウンオプションは両方ともmySQLDBの同じ列（サブカテゴリ）に移動するため、車はサブカテゴリ列に「黒」の値を設定できません。また、トラックはサブカテゴリ列に「赤」の値を設定できません。

ありがとう

4

1 に答える 1

2

実例： http： //jsfiddle.net/7YeL6/4/

この構造を考えると：

     <select name="category" id="category">
    <option selected value="Please Select">Please Select</option>           
    <option value="Cars">Cars</option>
    <option value="Trucks">Trucks</option>
    <option value="Motorcycles">Motorcycles</option>
    <option value="Boats">Boats</option>
</select>

<div>
<select name="category2" id="truck" class="second">
        <option value="white">white</option>
        <option value="black">black</option>            
</select>

<select name="category2" id="car" class="second">
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>           
</select>
</div>

jQuery.change関数を使用できます。

       $("#category").change(function () {
  var str = "";
str =  $("select#category option:selected").text();
    if(str == "Trucks"){
        $("select.second").not("#truck").hide();
        $("#truck").show();
        $("#truck").fadeIn(1000);
    }
    else if(str == "Cars"){
        $("select.second").not("#car").hide();
        $("#car").show();
        $("#car").fadeIn(1000);
    }

})

CSS

#category2{
display: none;
}
于 2013-03-25T16:52:02.713 に答える