Javascript 如何将基于ul li的下拉列表中的选定值设置为选定值

我想像在选择框中一样将所选值设置为选中，但我不能这样做，下面是我的HTML，我还附加了小提琴，这样我也可以显示我的CSS

<section class="main">
   <div class="wrapper-demo">
      <div id="dd" class="wrapper-dropdown-2" tabindex="1">
       select Color
       <ul class="dropd">
        <li style="border-right-color:#F6EB61" value="F6EB61">
         <a>100 C</a>
        </li>
        <li style="border-right-color:#F7EA48" value="F7EA48">
         <a>101 C</a>
        </li>
        <li style="border-right-color:#FCE300" value="FCE300">
         <a>102 C</a>
        </li>
      </div>
    </div>
  </section>

演示小提琴

像这样的事

$（文档）.ready（函数（）{
$（'.dropd li'）。在（'click'，function（）上{
console.log（'clicked'）；
var val=$（this.find（'a'）.html（）；
var col='#'+$（this.attr（'value'）；
控制台日志（col）；
$（'.selected'）.css（'border-right'，'20px-solid'+col）；
$（'.selected'）.html（val）；
});
});
选择颜色

你的

标签在你的小提琴演示中没有在第二个

之前关闭，比如“`@VPK:谢谢，我更正了它，检查了更新的链接。演示实际上是我想要的，但奇怪的是我得到了

var col='.''+$（this.attr（'value'）作为
#0
，有什么建议为什么值会变为零？虽然它不是零小提琴，但我有它在我的最后，我会尝试改变js库的同时，即尝试旧。可能这就是造成问题的原因。是的，jQuery 1.8.3解决了这个问题，我想lower也会出现同样的问题。是的，你应该使用的最低jQuery版本是1.11
$(document).ready(function (e)
    {
        function DropDown(el) {
            this.dd = el;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents: function () {
                var obj = this;

                obj.dd.on('click', function (event) {
                    $(this).toggleClass('active');
                    event.stopPropagation();
                });
            }
        }
        var dd = new DropDown($('#dd'));
        $(document).click(function () {
            // all dropdowns
            $('.wrapper-dropdown-2').removeClass('active');
        });
});

$(document).ready(function() {
    $('.dropd li').on('click', function() {
        console.log('clicked');
        var val = $(this).find('a').html();
        var col = '#' + $(this).attr('value');
        console.log(col);
        $('.selected').css('border-right', '20px solid' + col);
        $('.selected').html(val);
    });
});

<div class="selected" style="margin-right:30px;"> select Color</div>