根據輸入文本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

這是工作中的小提琴 。

$(".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');
    });

希望這就是您所需要的！