Question

我创建了一个选择，该选择将下拉以显示不同类型的行距的选项。但是，我希望选择项仅显示所选的行距图标，而不显示当前选择的行距样式。如果您查看下面选择的图像，则在选择的图标上方显示“ 1.0”。我想更改CSS或HTML，以使“ 1.0”（选定的选项）消失。谢谢！

HTML：

 <div class = "lineHeight">
                                        <select id="lineHeightSelect" onchange="changeStyle('line-height', this.value)">

                                            <option value="20px">1.0</option>
                                            <option value="35px">1.5</option>
                                            <option value="50px">2.0</option>
                                        </select>
                                    </div>

CSS：

.lineHeight {
    border: 1px solid #ccc;
    width: 35px;
    height: 35px;
    border-radius: 3px;
    overflow: hidden;
    background-color: #ffffff;
    background-image: url( 'https://cdn0.iconfinder.com/data/icons/pixel-perfect-at-24px-volume-1/24/line-height-512.png' );
    background-position: 6px center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
}

.lineHeight #lineHeightSelect {
    padding: 5px 8px;
    width: 100%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
}

#lineHeightSelect option:checked {
    display: none;
}

#lineHeightSelect select:focus {
    outline: none;
}

Javascript：

function changeStyle( property, value ) {
        if ( window.getSelection().rangeCount ) {
            var range = window.getSelection().getRangeAt( 0 ),
                    contents = range.extractContents(),
                    span = document.createElement( 'span' );

            span.style[ property ] = value;
            span.appendChild( contents );
            range.insertNode( span );
            window.getSelection().removeAllRanges()
        }
    }

Answer 1

我要说的是添加以下内容：

HTML

<option value="20px" onclick="twenty-hide() id="twenty">1.0</option>

JavaScript

function twenty-hide() {
    document.getElementById('twenty').style.visibility = 'hidden';
}

这有望解决您的问题。首先将其应用到一个，然后添加其他。如果没有（我仍在学习JS），请毫不犹豫地告诉我。

选择下拉菜单不显示所选元素

1 个答案: