Question

我有一个表单，它使用选择菜单中的值根据选项值显示更多选择菜单。

<label for="range">Please select range</label>
<select class="select" name="range" id="range" onChange="showStyles()" selected="">
    <option value="">Select a range</option>
    <option value="gloss">gloss</option>
    <option value="matt">matt</option>
    <option value="wood">wood</option>
    <option value="shaker">shaker</option>
</select>

<div id="styles">
    <label for="style">Which style would you like?</label>
    <select name="gloss" id="gloss" style="display:none;">
        <option value="1" selected="">laminate</option>
        <option value="2" selected="">glass</option>
        <option value="3" selected="">lacquer</option>
    </select> 

    <select name="matt" id="matt" style="display:none;">
        <option value="5" selected="">laminate</option>
        <option value="6" selected="">glass</option>
        <option value="7" selected="">lacquer</option>
        <option value="8" selected="">satin lacquer</option>
        </select> 

    <select name="wood" id="wood" style="display:none;">
        <option value="9" selected="">veneer solid</option>
        <option value="10" selected="">painted solid</option>
        <option value="11" selected="">high gloss veneer</option>
        <option value="12" selected="">laminate</option>
    </select> 

    <select name="shaker" id="shaker" style="display:none;">
        <option value="13" selected="">country shaker</option>
    </select>

每个后续选择都设置为display：none，然后我有一个javascript函数来显示相应的选择菜单。这不起作用。从控制台日志中我可以看到正在选择正确的选项ID，但该功能没有删除内联样式并显示选择菜单。

    //show styles when range is chosen
    function showStyles(){
        var selectedRange = document.getElementById("range").value;
        jQuery('#styles').show();
        jQuery('#'+selectedRange).show('fast');
        console.log(selectedRange);
    }

#styles div正在显示但不是选择。

我尝试使用以下方法完全删除style属性：

    jQuery('#'+selectedRange).removeAttr( "style" )

并使用以下方式设置css样式：

    jQuery('#'+selectedRange).css("display", "block");

但两者都没有奏效。

使用jquery删除内联样式属性

0 个答案: