如果点击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/
但选择框仍然是空的。
最佳答案
更改显示的 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>
关于javascript - 如何在div中单击时设置选择元素字体名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34977347/