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

Answer 2

试试这个。您的代码中存在一些拼写错误。检查一下..

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

使用选择图标类选择框显示css图标

2 个答案: