Question

我想在选择一个选项时使用JS显示输入html代码，这是我的HTML代码：

<select id="mystuff">
       <option value="" disabled selected>Chercher selon :</option>
       <option value="Concessionnaire" >Concessionnaire</option>
       <option value="date" >Date entrée client</option>
       <option value="nom_client" >Nom client</option>
       <option value="prenom_client" >Prénom client</option>
       <option value="telephone" >Numéro de téléphone client</option>
       <option value="email" >E-mail</option>
       <option value="vehicule" >Véhicule</option>
       <option value="chassis" >Châssis</option>
       <option value="activite" >Activité</option>
</select>

<div id="msgbox"></div>

这是我的JavaScript代码：

$('#mystuff').change(function() {
       opt = $(this).val();
       if (opt=="concessionaires") {
       $('#msgbox').html('<select class="form-control" name="champ" id="viewSelector" required>

       <option value="concessionaires">Concessionnaire</option>
       <option value="date" >Date entrée client</option>
       <option value="nom_client" >Nom client</option>
       <option value="prenom_client" >Prénom client</option>
       <option value="telephone" >Numéro de téléphone client</option>
       <option value="email" >E-mail</option>
       <option value="vehicule" >Véhicule</option>
       <option value="chassis" >Châssis</option>
       <option value="activite" >Activité</option>
       </select> ');
       }else if (opt == "date") {
       $('#msgbox').html('<input name="valeur" type="date" class="form-control" laceholder="date" required>');
       }else if (opt == "chassis") {
       $('#msgbox').html('<input name="valeur" type="text" class="form-control" placeholder="chassis" required>');
        }
    });

Tnx的帮助！

Answer 1

你的代码很好，但你似乎有几个语法错误。

查看jsfiddle上的工作版本：https://jsfiddle.net/03rtkv8v/1/

$(document).ready(function(){
  $('#mystuff').change(function() {
    opt = $(this).val();
    if (opt == "opt1") {
      $('#msgbox').html('<select class="form-control" name="champ" id="viewSelector" required><option value="concessionaires">Concessionnaire</option><option value="date">Date entrée client</option><option value="nom_client">Nom client</option><option value="prenom_client">Prénom client</option><option value="telephone">Numéro de téléphone client</option><option value="email">E-mail</option><option value="vehicule" >Véhicule</option><option value="chassis">Châssis</option><option value="activite" >Activité</option></select>');
    } else if (opt == "date") {
      $('#msgbox').html('<input name="valeur" type="date" class="form-control" laceholder="date" required>');
    } else if (opt == "chassis") {
      $('#msgbox').html('<input name="valeur" type="text" class="form-control" placeholder="chassis" required>');
    }
  });
});

我不得不删除几个终结字符和几个空格。我还把它包装在一个文件中。已经。

Answer 2

这有点太模糊了，但你可以使用.show（）jquery方法，如果这就是你所要求的。

Answer 3

我创建了一个函数（inputNewHTML）来显示我的评论。您可以更改某些内容的innerHTML，然后它就可以正常运行。

我制作了一个HTML代码作为现场演示：

<html>
    <head>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #A, #B{
                width: 50%;
                height: 100%;
                float: left;
            }
            textarea{
                width: 100%;
                height: 100%;
            }
        </style>
        <script type="text/javascript">
            function inputNewHTML(newVar, target)
            {
                document.getElementById(target).innerHTML = newVar;
            }
        </script>
    </head>

    <body>
        <div id="A">
            <textarea onchange="inputNewHTML(this.value, 'B')" onkeyup="inputNewHTML(this.value, 'B')"></textarea>
        </div>
        <div id="B">
        </div>
    </body>
</html>

我希望这就是你要找的东西。

如何使用JavaScript显示html输入：.html（＆＃39;＆lt; input type =＆＃34; text＆＃34; /＆gt;＆＃39;）

3 个答案: