Question

<ul tabindex="-1" class="k-list k-reset" id="ddlEngineer_listbox" role="listbox" aria-hidden="true" aria-live="off" data-role="staticlist" unselectable="on">
  <li tabindex="-1" class="k-item k-state-selected" role="option" aria-selected="true" unselectable="on" data-offset-index="0">[Unassigned]</li>
  <li tabindex="-1" class="k-item" role="option" aria-selected="false" unselectable="on" data-offset-index="1">DANIEL RUSSELL</li>
  <li tabindex="-1" class="k-item" role="option" aria-selected="false" unselectable="on" data-offset-index="2">MELODY CAPONE</li>
  <li tabindex="-1" class="k-item k-state-selected k-state-focused" id="040e59b0-8d21-4368-8ea2-2bc1c4153133" role="option" aria-selected="true" unselectable="on" data-offset-index="3">[Show All]</li>
</ul>

我有上面的html代码，

使用Jquery，我想遍历下拉列表，并检查是否有选项包含名称为“ focused”的CSS类，以便可以将其替换为其他类。并将“ area-selected”属性设置为false

到目前为止，我已经尝试过了...

$("#ddlEngineer option").each(function(i){
var v=$('select[name="ddlEngineer"] option:selected').attr('class');
if(v.Contains("focused"))
{
$(this).addClass("k-item");

}
)};

但是，据我所知$('select[name="ddlEngineer"] option:selected').attr('class')具有undefined的值，它似乎不起作用

Answer 1

您可以通过一种更简单的方式来做到这一点：

$.fn.handleDropDown = function() {
    let $option = $(this).find("option.focused");

    if ($option.length) {
        $option
            .toggleClass("focused some-other-class") // remove the 'focused' class and add 'some-other-class'
            .attr("aria-selected", "false"); // change the value of 'aria-selected' attribute
    }
};

$("#ddlEngineer").handleDropDown();

尽管我强烈建议您避免像这样更改kendo小部件的属性值。无论您想在小部件中实现什么，它都可能有更好的语义方式。

遍历下拉列表，检查是否有<option>具有特定的类？

1 个答案: