javascript - 使用选择图标类 selcetbox 显示 css 图标

Question

在我的表单选择框中有一些图标类，我希望当用户从列表框中选择一个类时它会显示另一个 div。

我写了一个代码，但不知道如何附加 css

<script type="text/javascript">
 $(document).ready(function() {
   $("#ion").change(function() {
     $(".icon-preview").empty();
     if ( $("#icon").val()!="" ){
        $(".icon-preview").append("");
     }
     else{
        $(".icon-preview").append("displays icon here");
     }
   });
 });
</script>

<div class="icon-preview"></div>

我的选择框

<select multiple class="form-control" id="icon"  name="icon">
                  <option value="icon-home-2">icon-home-2</option>
                  <option value="icon-mobile">icon-mobile</option>

</select>

我的输出会是这样的

<div class="icon-preview">
    <i class="icon-mobile"></i>
</div>

Answer 1

试试这个:

$(document).ready(function() {
   $("#icon").change(function() {
     $(".icon-preview").empty();
     if ( $("#icon").val()!="" ){
        $(".icon-preview").append('<i class="'+$(this).val()+'">test</i>');
     }
   });
 });

有几个问题:

• 你有类型:$("#ion") 到 $("#icon")。
• 您应该附加类 if($("#icon").val()!="") 而不是 if($("#icon").val() =="")

DEMO