Question

我有以下代码

<html>
   <form method="post" action="Demo7.jsp">
      Select Programming font:
      <select name="font">
         <option value="arial">arial black</option>
         <option value="tohma">ENGLISH</option>
         <option value="times new roman">times new roman</option>
      </select>
      EnterValue: <input type="text" name="text1"><br> 
      <br>
      <input type="submit" value="Submit"><br>
   </form>
</html>

我想使用从下拉列表中选择的字体。它应该根据所选字体更改文本框和文本框字体。

我不知道该怎么做。请帮帮我。

提前致谢。

Answer 1

试试这个，

$(function(){
    $('select[name="font"]').on('change',function(){
        $('input[name="text1"]').css('font-family',this.value);
    });
});

Live Demo

Answer 2

试

$("select[name='font']").change(function() {
      $("input[name='text1']").css("font-family", $(this).val());

});

Answer 3

试试这个。

$('select').on('change', function(){
    $('textarea').css('font-family', $(this).val()); //for textarea
    //$('input[type="text"]').css('font-family', $(this).val()); // for textbox
});

Demo

Answer 4

为select添加一些类

试试吧

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
     $('.somefont').change(function(){
        font= $(this).val();
        //Set Font Family for element that you needed.
        $('body').css('font-family', font);
     });
</script>

Answer 5

如果您不想使用jQuery，只需将简单的JavaScript，CSS和onChange属性添加到select元素中，您就可以轻松实现这一点。类似的东西：

<select name="font" onChange="document.getElementsById('text1').style.fontFamily = this.value;">
  <option value="arial">arial black</option>
  <option value="tahoma">ENGLISH</option>
  <option value="times new roman">times new roman</option>
</select>

EnterValue: <input type="text" name="text1" id="text1"><br>

请注意，您还需要在文本输入中添加id属性才能使其生效。

如何使用下拉列表在文本框中设置字体系列？

5 个答案: