jquery - 根据输入文本jquery选择有序列表中的元素并更改颜色

Question

我有一个有序列表:

<ol id="selectable" class="list">
  <li class="ui-widget-content" id="l1">Item 1</li>
  <li class="ui-widget-content" id="l2">Item 2</li>
  <li class="ui-widget-content" id="l3">Item 3</li>
</ol>

<style>
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39805; color: white; }
</style>

还有一个下拉组件:

<select id="sel"></select>

首先，下拉列表中会填入列表的值。然后在每次从下拉列表调用 onchange 事件时，所选选项也应被选为列表中的元素，然后用不同的背景颜色标记。例如，如果下拉列表中的选项“元素 2”被选中，则列表中的“元素 2”也应该被选中，并且应该具有不同的背景颜色以表明它已被选中。我这样试过，但是最后一部分为列表中的所选元素赋予颜色不起作用。

//The dropdown is fill up with the content of each item of the list
$(".list li").each(function(key, value){
        var name = $(value).html();
        var real = name.split(" ");
        $("#sel").append(new Option(real[1],value.id)); 
});

$("#sel").on('change',function(){
        var selectedoption = $("#selectable");  
        var selectedelement;
        $(".list li").each(function(key, value){
            if($("#sel").val() == value.id){
                selectedelement = value;//selecting the item in the list
                $("#selectable").on("selectablestop", function(){$(".ui-selected", element);});//change the background color of the selected item
            }
});

有人知道这里出了什么问题吗？谢谢!

Answer 1

这是工作 fiddle .

$(".list li").each(function(key, value){
        var name = $(value).html();
        var real = name.split(" ");
        $("#sel").append(new Option(real[1],value.id)); 
});

$("#sel").on('change',function(){
        var selectedoption = $("#selectable");  
        var selectedelement;
        selectedoption.find('li').removeClass('ui-selected');
        $('#' + $(this).val()).addClass('ui-selected');
    });

希望这就是您所需要的!