Question

如果单击div中的文本，则select中显示选择元素shoudl的字体名称，例如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后，select元素为空。

如何修复它以便在选择中显示字体名称Comic Sans MS？我试图在Fiddle中使用toString（） http://jsfiddle.net/0Lce9ob9/8/

但是选择框仍然是空的。

Answer 1

要根据option的CSS更改显示的div（而不是相反，我之前已了解），您可以使用以下内容：

$("#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中编写#属性时，不包含哈希font-family标记。这只是在CSS中选择元素时。最后，无论何时使用名称中包含空格的<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>

double direct_up(int k, int n) 
{
    int startingnumber = k;
    double sum = 0;
    for (int i = startingnumber; i <= k+n; i++) {
        sum += term(i);
    }
    return sum;
}

Answer 2

尝试使用String.prototype.replace()从'属性的#changeMe font-family值中移除单引号style字符，并在{{.change()上调用#fs个事件1}}元素

$(function() {
  $("#changeMe").on('click', function() {
    $('#fs').val(this.style.fontFamily.replace(/'/g, ""))
    .change();
  });
});

jsfiddle http://jsfiddle.net/0Lce9ob9/9/

Answer 3

从# ID div中删除changeMe。

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: