选择选项中的删除文本

Question

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

提琴手：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;} 

是越来越应用的颜色，但不是文字修饰。我错过了什么？任何建议表示赞赏。

后市展望：

选项 '一些文本1' 和 '某些文本3' 应该被删除线了。

Answer 1

试一下：

.strikeout { 
 
    color: blue; 
 
} 
 

 
.sel:first-child{ 
 
    text-decoration: line-through; 
 
}

<select class='sel'> 
 
    <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>

Answer 2

您可以使用这样笑单向代码做到这一点：https://jsfiddle.net/byB9d/6225/ 只是转换文本到UNI-代码就像从这个地方http://manytools.org/facebook-twitter/strikethrough-text/并粘贴文本回你的html哈哈

html

<select> 
    <option value="1" class="strikeout text-style">S̶o̶m̶e̶ ̶T̶e̶x̶t̶ ̶1̶</option> 
    <option value="2" disabled="true">Some Text 2</option> 
    <option value="3" class="strikeout text-style">S̶o̶m̶e̶ ̶T̶e̶x̶t̶ ̶3̶</option> 
</select> 

CSS

.text-style {color:blue;} 

Answer 3

，将采取的代码和努力更行，你还需要使用jQuery和引导。

$('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>