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

【问题标题】：Select Dropdown to not show chosen element选择下拉菜单不显示所选元素
【发布时间】：2018-06-23 09:05:11
【问题描述】：

我创建了一个选择，它将下拉以显示不同类型的行距的选项。但是，我希望选择只显示所选的行距图标，而不是显示我当前选择的行距样式。如果您查看下面选择的图像，我在所选图标上方显示“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()
        }
    }

【问题讨论】：

请在问题中添加 changeStyle('line-height', this.value) 函数。
好的，我刚刚这样做了！

标签： html css drop-down-menu wysiwyg

【解决方案1】：

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

HTML

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

JavaScript

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

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

【讨论】：