我想像在选择框中一样将选定的值设置为选定的值,但是我做不到,下面是我的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>
这是我的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/
最佳答案
这样的东西? 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>