html - 选择选项中的删除线文本

Question

我试图删除选择选项中的文本，但由于某种原因它不起作用。

fiddler : 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;}

正在应用颜色，但没有应用文本装饰。我错过了什么吗？任何建议表示赞赏。

期望:

应删除选项“Some Text 1”和“Some Text 3”。

Answer 1

这将需要更多代码行和更多工作，您还需要使用 JQuery 和 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>