Question

我想知道是否有一个JavaScript / jQuery根据用户之前选择的内容灰显掉下拉选项。例如，

<select id="cpu" name="cpu" onchange="calculateTotal()"> 
            <option value="None">None</option>
            <option value="A6">AMD A6 Dual Core (£56)</option>
            <option value="A8">AMD A8 Quad Core (£72)</option>
            <option value="760k">Athlon 760k Quad (£72)</option> 
            <option value="A10">AMD A10 Quad Core (£119)</option> 
            </select> 

<select id="mobo" name="mobo" onchange="calculateTotal()">
            <option value="None">None</option> 
            <option value="DS2">Gigabyte A88X-DS2 (£45)</option>
            <option value="D3H">Gigabyte A88X D3H (£60)</option>
            <option value="A88X-M">ASUS A88X-M Plus (£67)</option> 
            <option value="A88X-UP4">Gigabyte A88X-UP4 (£109)</option> 
            </select>

假设用户选择“AMD A6双核”（值=“A6”），但这与“技嘉A88X-DS2”（值=“DS2”）不兼容，因此该选项将显示为灰色out，所以用户无法选择它。

有没有办法做到这一点？提前致谢

编辑1; 快速问题，有没有办法让它如果用户选择不同的CPU，不兼容的主板将再次可用？

Answer 1

试试这个，
在data-nonCompatible属性中添加非兼容元素，如果有两个或多个非兼容元素用逗号分隔它们。 HTML

<select id="cpu" name="cpu"> 
    <option value="None">None</option>
    <!--add elements non compatible in the data-nonCompatible attribute separated by comma-->
    <option data-nonCompatible="DS2" value="A6">AMD A6 Dual Core (£56)</option>
    <option data-nonCompatible="" value="A8">AMD A8 Quad Core (£72)</option>
    <option data-nonCompatible="" value="760k">Athlon 760k Quad (£72)</option> 
    <option data-nonCompatible="" value="A10">AMD A10 Quad Core (£119)</option> 
</select> 

<select id="mobo" name="mobo" onchange="calculateTotal()">
    <option value="None">None</option> 
    <option value="DS2">Gigabyte A88X-DS2 (£45)</option>
    <option value="D3H">Gigabyte A88X D3H (£60)</option>
    <option value="A88X-M">ASUS A88X-M Plus (£67)</option> 
    <option value="A88X-UP4">Gigabyte A88X-UP4 (£109)</option> 
</select>

<小时/> jQuery的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#cpu').on('change',function(){
             $('#mobo option').css({'display':'block','background-color':'#FFF'})
        var foo=$('option:selected').attr('data-nonCompatible').split(',')
        for(i=0;i<foo.length;i++){
            $('#mobo option[value="'+foo[i]+'"]').css({'background-color':'red'})
            //If you want the elements do not appear in the list
            //$('#mobo option[value="'+foo[i]+'"]').css({'display':'none'})
            }

        })
});
</script>

根据其他选择灰显表单选项

1 个答案: