javascript - 如何在div中单击时设置选择元素字体名称

Question

如果点击div中的文本，select中应该显示select元素的字体名称，例如Comic Sans MS

我试过html

<select id="fs">
  <option value=""></option>
  <option value="Verdana">Verdana</option>
  <option value="Impact">Impact</option>
  <option value="Comic Sans MS">Comic Sans MS</option>
</select>


<br/>

<div id="changeMe" style='font-family:"Comic Sans MS"'>

  click here</div>

使用javascript

$(function() {
  $("#changeMe").on('click', function() {
    $('#fs').val($(this).css("font-family"));
  });

});

点击click here后选择元素为空。

如何修复它以便字体名称 Comic Sans MS 出现在选择中？我尝试在 Fiddle 中使用 toString() http://jsfiddle.net/0Lce9ob9/8/

但选择框仍然是空的。

Answer 1

更改显示的 option基于 div 的 CSS (而不是相反，正如我之前所理解的那样)您可以使用以下内容:

$("#changeMe").on('click', function() {
  var font = $(this).css("font-family");
  $('#fs option[value=' + font + ']').prop("selected", true);
});

只需更改 value的 select元素本身不会完成你想要的:你需要显式修改 option你想要显示的。获得所有option带有 value 的元素的 Comic Sans MS ，你会使用:

$("option[value='Comic Sans MS']")

另外，当你写 id 时请注意HTML 中的属性，您不包含散列 #标记。只有在 CSS 中选择元素时才会出现这种情况。最后，每当您使用 font-family名称中包含空格，必须用引号引起来。所以你的 <div>应该是这样的:

<div id="changeMe" style='font-family:"Comic Sans MS"'>click here</div>

这是一个片段:

$("#changeMe").on('click', function() {
  var font = $(this).css("font-family");
  $('#fs option[value=' + font + ']').prop("selected", true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="fs">
  <option value=""></option>
  <option value="Verdana">Verdana</option>
  <option value="Impact">Impact</option>
  <option value="Comic Sans MS">Comic Sans MS</option>
</select>


<br/>

<div id="changeMe" style='font-family:"Comic Sans MS"'>

  click here</div>