如何使用JavaScript显示html输入：.html（'<input type =“text”/>'）

-2

我想使用JS显示输入html代码，当我选择一个选项时，这是我的html代码：如何使用JavaScript显示html输入：.html（'<input type =“text”/>'）

<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对你有所帮助！

来源

2016-03-14 Zoui10

脚本代码在哪里？ –

你想添加一个html代码到现有的元素？你可以这样做，就像添加到'0123HT'的'innerHTML'或 –

我想要的是，当我选择一个选项的JavaScript显示我输入根据该选项 – Zoui10

你的代码基本上没问题，但你似乎有几个语法错误。

检查出的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>'); 
    } 
    }); 
});

我不得不删除一些行尾字符和多个空格。我也把它包装在一个document.ready中。

来源

2016-03-14 20:25:15 danielson317

在开始输入被隐藏;当我选择一个选项的JavaScript显示我根据该选项的输入 – Zoui10

我看到。我的网站上有很多这样的内容。让我再尝试一次。 – danielson317

其实看着你的额外的JavaScript代码，它应该工作正常。你有什么问题？ – danielson317

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

来源

2016-03-14 20:29:45

我做了一个函数（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>

我希望这是你在找什么。

来源

2016-03-14 20:36:34

如何使用JavaScript显示html输入：.html（'<input type =“text”/>'）

回答

相关问题