0

昨日、サブカテゴリの2番目のドロップダウンリストを生成する方法を尋ねたので、最初のドロップダウンで[トラック]を選択すると、2番目のドロップダウンが「黒」または「白」の色で表示されます。 「車」を選択すると、2番目に生成されたドロップダウンに「赤」、「緑」、または「青」のオプションがあり、コードに実装したこのhttp://jsfiddle.net/7YeL6/5/につながり、次のように機能します。魅力（私はすでに「.js」により多くの結果を入れており、100％機能しています）。

しかし、3番目のカテゴリを生成する必要があり、jqueryについて何も知らないため、新しい問題に直面しています。

前のコードに基づいて、2番目のドロップダウンに基づいて表示される3番目のドロップダウンが必要です。たとえば、「トラック」を選択すると、「黒」の新しいドロップダウンが表示され、「新規」または「使用済み」を選択します。 「車」を選択し、次に「赤」を選択すると、「購入」または「レンタル」を選択するための新しいドロップダウンが表示されます。

HTMLコード

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

CSSコード

#category2{
    display: none;
}
.second{
    display: none;

}

JSコード

$(document).ready(function(){
$("#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);
    }

})
});

ありがとう

4

1 に答える 1

1

代わりにこれをしたかったようです

デモ： http： //jsfiddle.net/7YeL6/7/

HTMLコード

<select id="category" class="first">
    <option selected value="Please Select">Please Select</option>           
    <option value="car">Cars</option>
    <option value="truck">Trucks</option>
    <option value="motor">Motorcycles</option>
    <option value="boat">Boats</option>
</select>

<select id="truck" class="second">
        <option selected value="Please Select">Please Select</option>    
        <option value="white">white</option>
        <option value="black">black</option>            
</select>
<select id="car" class="second">
        <option selected value="Please Select">Please Select</option>    
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>           
</select>

<select id="truck-white" class="third">
        <option value="size1">truck-white1</option>
        <option value="size2">truck-white2</option>            
</select>
<select id="truck-black" class="third">
        <option value="size1">truck-black1</option>
        <option value="size2">truck-black2</option>            
</select>
<select id="car-red" class="third">
        <option value="1">car-red1</option>
        <option value="2">car-red2</option>
        <option value="3">car-red3</option>           
</select>
<select id="car-green" class="third">
        <option value="1">car-green1</option>
        <option value="2">car-green2</option>
        <option value="3">car-green3</option>           
</select>

CSSコード

.second{
    display: none;
}
.third{
    display: none;
}

JQueryコード

$(".first").change(function () {
    var str = "";
    str =  $(this).val();
    $('.second').hide();
    $('.third').hide();
    $('#'+str).show();
});
$(".second").change(function () {
    var str = "";
    str =  $(this).val();
    var id = $(this).attr('id');
    $('.third').hide();
    $('#' + id + "-" + str).show();
})
于 2013-03-26T17:38:51.907 に答える