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

Question

我想像在选择框中一样将所选值设置为已选，但我做不到，下面是我的 HTML，我还附加了 Fiddle，这样我也可以显示我的 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>

这是我的Java脚本代码

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

演示 FIDDLE

http://jsfiddle.net/h65gbpu0/4/

Answer 1

是这样的吗？ http://jsfiddle.net/h65gbpu0/6/

$(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>