選擇選項中的刪除文本

我想刪除選擇選項中的文本，但由於某種原因，它不起作用。選擇選項中的刪除文本

提琴手：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' 應該被刪除線了。

來源

2015-08-18 Vimalan Jaya Ganesh

它是工作在Firefox（部分地），而不是在鉻，順便說一句。部分 - 我的意思是：選擇元素時不應用直通，只需在下拉單擊.... – sinisake

試一下：

.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>

來源

2015-08-18 22:34:23 BeckiD

「應該選中'Some Text 1'和'Some Text 3'選項。」是從他的問題直接引用。 –

感謝您的建議，但是，正如Adam所說，應該刪除選項'Some Text 1'和'Some Text 3'。 –

您可以使用這樣笑單向代碼做到這一點：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;}

來源

2015-08-18 22:39:44

感謝您的建議，但實際的文字不應該被打出。 –

，將採取的代碼和努力更行，你還需要使用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>

來源

2015-08-19 01:35:42 BeckiD

當然，謝謝你的建議。我的+1也是如此。我會嘗試在我的應用程序中實現這個邏輯。 –

選擇選項中的刪除文本

回答

相關問題