选择选项中的删除线文本 [英] Strikeout text in Select option

问题描述

我正在尝试删除select选项中的文本，但是由于某些原因，它无法正常工作.

I am trying to strikeout the text in select option but, for some reason it is not working.

提琴手:: https://jsfiddle.net/99x50s2s/95/

HTML:

<select>
    <option value="1" class="strikeout text-style">Some Text 1</option>
    <option value="2" disabled="true">Some Text 2</option>
    <option value="3" class="strikeout text-style">Some Text 3</option>
</select>

CSS:

.strikeout {text-decoration:line-through;}
.text-style {color:blue;}

颜色将被应用，而不是文本装饰.我有什么想念的吗?任何建议表示赞赏.

The color is getting applied but not the text-decoration. Am I missing anything? Any suggestions in appreciated.

期望:

应该删除选项某些文本1"和某些文本3".

The option 'Some Text 1' and 'Some Text 3' should be striked out.

推荐答案

这将花费更多的代码和精力，您还需要使用JQuery和bootstrap.

that will take much more lines of code and effort, you also will need to use a JQuery and bootstrap.

$('body').on('click', '.option li', function () {
    var i = $(this).parents('.select').attr('id');
    var v = $(this).children().text();
    var o = $(this).attr('id');
    $('#' + i + ' .selected').attr('id', o);
    $('#' + i + ' .selected').text(v);
});
$(".disabledM").click(function(event) {
  event.preventDefault();
});

body {
    margin:20px;
}
.select button {
    width:100%;
    text-align:left;
}
.select .sel {
    position:absolute;
    right:10px;
    margin-top:10px;
}
.select:last-child>.btn {
    border-top-left-radius:5px;
    border-bottom-left-radius:5px;
}
.selected {
    padding-right:10px;
    text-decoration: line-through;
    
}
.option {
    width:100%;
}
a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled:hover {
    background-color:#d9d9d9 !important;
    color:#aaa !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group-btn select" id="select1">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><span class="selected"></span>  <span class="sel"></span>
    </button>
    <ul class="dropdown-menu option" role="menu">
        <li><s>Some Text 1</s>
        </li>
        <li class="disabledM">Some Text 2</li>
        <li><s>Some Text 3</s>
        </li>
    </ul>
</div>

这篇关于选择选项中的删除线文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！