jQueryの：私はメインのカテゴリから選択する場合

Question

は、私がメインカテゴリから選択されているものに基づいてサブカテゴリーを選択する課題を抱えている主なカテゴリから選択にサブカテゴリベースの取得、サブカテゴリーは、まだすべてのオプションを表示します第2のカテゴリーである。 はここでここで

Answer 1

は、あなたがしたいだけのオプションへの選択を設定します。オプションを無効に

$(document).ready(function(){ 
 
    var $optgroups = $('#subcategory > optgroup'); 
 
    
 
    $("#category").on("change",function(){ 
 
    var selectedVal = this.value; 
 
    
 
    $('#subcategory').html($optgroups.filter('[label="'+selectedVal+'"]')); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="category"> 
 
<option value="Fashion">Fashion</option> 
 
<option value="Electronics">Electronics</option> 
 
</select> 
 
<select name="subcategory" id="subcategory"> 
 
<optgroup label="Fashion"> 
 
    <option value="Men's wear">Men's wear</option> 
 
    <option value="Women's wear">Women's wear</option> 
 
    </optgroup> 
 
    <optgroup id="B" label="Electronics"> 
 
    <option value="Television">Television</option> 
 
    <option value="Game Console">Game Console</option> 
 
    </optgroup> 
 
</select>

Answer 2

$(document).ready(function(){ 
 
    $("#category").on("change",function(){ 
 
    var selectedVal=$("#category option:selected").val(); 
 
    $("#subcategory > optgroup").attr("disabled","disabled"); 
 
    $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="category"> 
 
    <option value="Fashion">Fashion</option> 
 
    <option value="Electronics">Electronics</option> 
 
</select> 
 
<select name="subcategory" id="subcategory"> 
 
    <optgroup label="Fashion"> 
 
    <option value="Men's wear">Men's wear</option> 
 
    <option value="Women's wear">Women's wear</option> 
 
    </optgroup> 
 
    <optgroup id="B" label="Electronics" disabled> 
 
    <option value="Television">Television</option> 
 
    <option value="Game Console">Game Console</option> 
 
    </optgroup> 
 
</select>

はあなたが解決

$(document).ready(function(){ 
 
    $("#category").on("change",function(){ 
 
    var selectedVal = $(this).find("option:selected").val(); 
 
    
 
    $('#subcategory > optgroup[label="'+selectedVal+'"]') 
 
     .show() 
 
     .siblings("optgroup") 
 
     .css("display","none"); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="category"> 
 
<option value="Fashion">Fashion</option> 
 
<option value="Electronics">Electronics</option> 
 
</select> 
 
<select name="subcategory" id="subcategory"> 
 
<optgroup label="Fashion"> 
 
    <option value="Men's wear">Men's wear</option> 
 
    <option value="Women's wear">Women's wear</option> 
 
    </optgroup> 
 
    <optgroup id="B" label="Electronics"> 
 
    <option value="Television">Television</option> 
 
    <option value="Game Console">Game Console</option> 
 
    </optgroup> 
 
</select>

これはあなたを助けることを願って行くのコードのスニペットです。