选中元素中的下划线/删除所有选项

Question

我们如何使用Jquery为select元素中的所有选项加下划线/删除。

下划线/ Strikeout到元素仅显示选定的选项作为下划线/删除线。 我需要将所有选项显示为下划线/删除线。

示例如下： 如果我使用以下HTML代码，则显示如下：

<select id="cmb1" style="width: 80px; float: left; position: absolute; top: 269px; left: 319px; cursor: pointer; text-decoration: line-through; font-family: Calibri;" data-combo="simple" data-div="divcmbSetting" class="ui-draggable ui-draggable-handle ui-selectee focused" data-lbl="lblcmb1" data-forecolor="51,51,51" data-backcolor="255,255,255" data-font="Calibri, 12px"><option value="Off" style="text-decoration: line-through;" class="ui-selectee">1</option><option value="Off" style="text-decoration: line-through;" class="ui-selectee">2</option><option value="Off" style="text-decoration: line-through;" class="ui-selectee">3</option><option value="Off" style="text-decoration: line-through;" class="ui-selectee">4</option></select>

但它看起来应该是

我在Jquery下面尝试过将CSS应用于所有选项即使它在Source中也显示但不适用于选项。

JQUERY：

 $("#cmb1 option").each(function () {
                        $(this).css("text-decoration", "line-through");
                    });

DEMO

Answer 1

不确定您是否可以设置原生选择菜单的样式。但你可以选择jquery-ui，它有一个可选择的selectmenu。像这样：

在选项文字周围添加范围：

 <select id="cmb1" style="width: 80px; float: left; position: absolute; top: 269px; left: 319px; cursor: pointer; text-decoration: line-through; font-family: Calibri;" data-combo="simple" data-div="divcmbSetting" class="ui-draggable ui-draggable-handle ui-selectee focused" data-lbl="lblcmb1" data-forecolor="51,51,51" data-backcolor="255,255,255" data-font="Calibri, 12px">
<option value="Off" style="text-decoration: line-through;" class="ui-selectee"><span>1</span></option><option value="Off" style="text-decoration: line-through;" class="ui-selectee"><span>2</span></option>
<option value="Off" style="text-decoration: line-through;" class="ui-selectee"><span>3</span></option>
<option value="Off" style="text-decoration: line-through;" class="ui-selectee"><span>4</span></option>
</select>

添加选择菜单：

$(document).ready(function(){
 $('select').selectmenu();
})

在span和li元素上设置css：

li, span
{
    text-decoration: line-through;

}

工作示例：http://jsfiddle.net/fy6gcvaz/

你可能想要改变整个造型。