Jquery 将选定文本绑定到selectbox的属性

我创建了一个小应用程序来将文本从textarea添加到div块。我希望当用户单击黄色div text not get append时，所选文本的属性（字体系列、字体大小）也会在选择框中高亮显示

$(document).ready( function() {
$('#page1').click(function(e){
var $el = $("<li class='text'>"+$('#ta').val()+"</li>"),
    $this = $(this), offset = $this.offset();
$el.css({
    position: 'absolute',
    left: e.pageX - offset.left,
    top: e.pageY - offset.top
});
$this.append($el);
($el).draggable();
$("#page1 li").click(function(){
$("#page1 li").removeClass('active');
$(this).addClass("active");

});
});
    $("#fs").change(function() {
        $('li.active').css("font-family", $(this).val());
    });
    $("#size").change(function() {
        $('li.active').css("font-size", $(this).val() + "px");
    });

  });  

$（文档）.ready（函数（）{
$（'#第1页'）。单击（函数（e）{
var$el=$（“
”+$（'#ta'）.val（）+“
”），
$this=$（this），offset=$this.offset（）；
$el.css({
位置：'绝对'，
左：e.pageX-offset.left，
顶部：e.pageY-offset.top
});
$this.append（$el）；
（$el）.draggable（）；
$（“#page1 li”）。单击（函数（）{
$（“#page1 li”）.removeClass（'active'）；
$（此）.addClass（“活动”）；
});
});
$（“#fs”）.change（函数（）{
$（'li.active'）.css（“字体系列，$（this.val（））；
});
$（“#大小”）.change（函数（）{
$（'li.active'）.css（“字体大小”，$（this.val（）+“px”）；
});
});  

---

jsiddle-link:

对于您想要什么，解释不是很清楚。我想你想要这样的东西：

$('#page1').click(function(e){
  if( $(e.target).is('li.text') ){
      return;
  }
  /* other code*/

})

---

演示：

thnks@charlie：关于答案，您还可以帮助我更新selectbox中的选定属性（例如，当用户选择comicsans作为一个活动文本，选择arial作为其他文本时，请先单击..selectbox将其更改为comicsans，然后单击其他文本..selectbox更改为arial）使用select的更改处理程序根据select值修改css再次查看FIDLE…您已经有了可以工作的代码。。。。但只有当项目处于活动状态时，更改处理程序才能正常工作。我想单击选定的文本更改选择框选项OK。。我不理解这个问题…试试这个，我添加了一些评论，应该有助于理解发生了什么