在JQUERY中創建一個特定的表格

Question

所以讓我解釋一下。我有一個練習要做。 （在jQuery）

1：創建一個按鈕，當我們點擊它時，它會顯示一個選擇不同的選項和一個按鈕「確定」。

2：我們選擇一個，然後點擊「OK」，它會創建我們選擇的內容（數字，名稱，密碼等），但每個只能創建1個（並且對郵件，密碼等等）。

3：單選按鈕放在某處當wz點擊它時顯示按鈕提交。

（對不起我的英語）

這裏我做了什麼至今。

編輯：（忘了問題杜）那麼怎麼我的問題是我怎麼能創造只各1當我點擊OK（姓名，密碼ECT）

編輯2：另外我怎麼能添加一些正則表達式限制字符數爲例？我應該使用一些功能的變種？

HTML〜

<button type="button" id="button">Add un champ</button> 

<select style="display:none" id="choix"> 
    <option value="">--Choisir--</option> 
    <option value="mail">Email</option> 
    <option value="nom">Nom</option> 
    <option value="password">password</option> 
    <option value="number">number</option> 
</select> 


<button style="display:none" type="button" id="OK">OK</button> 

<form> 

    <div id="div"> 

    </div> 


</form> 

JS〜

$(document).ready(function() { 
    $("#button").click(function(){ 
     $("#choix , #OK").toggle(); 
    }); 
    $("#choix").change(function() { // lorsqu'on change de valeur dans la liste 
    var valeur = $(this).val(); // valeur sélectionnée 

     if(valeur != '') { 
      if(valeur == 'mail') { 

       $('#div').append('<p>Mail</p> <input type="text" />'); 
      } 
      else if(valeur == 'nom') { 
       $('#div').append('<p>nom</p> <input type="text" />'); 
      } 
      else { 

      } 
     } 
    }); 
}); 

Answer 1

也許這樣的事情？

$(document).ready(function() { 
 
    $("#button").click(function(){ 
 
     $("#choix , #OK").toggle(); 
 
    }); 
 
    $('#OK').click(function(){ 
 
     var valeur = $('#choix').val(); 
 

 
     if(valeur != '' && !checkIfExists(valeur)) { 
 
      switch(valeur) { 
 
       case "mail": 
 
        $('#div').append('<p>' + valeur + '</p><input type="text" />'); 
 
        break; 
 
       case "nom": 
 
        $('#div').append('<p>' + valeur + '</p><input type="text" />'); 
 
        break; 
 
       default: 
 
        break; 
 
      } 
 
     } 
 
    }); 
 
}); 
 

 
function checkIfExists(type){ 
 
    if($(document).find('p:contains("' + type + '")').length > 0){ 
 
    return true; 
 
    }else{ 
 
    return false; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="button">Add un champ</button> 
 

 
<select style="display:none" id="choix"> 
 
    <option value="">--Choisir--</option> 
 
    <option value="mail">Email</option> 
 
    <option value="nom">Nom</option> 
 
    <option value="password">password</option> 
 
    <option value="number">number</option> 
 
</select> 
 

 

 
<button style="display:none" type="button" id="OK">OK</button> 
 

 
<form> 
 

 
    <div id="div"> 
 

 
    </div> 
 

 

 
</form>

Answer 2

所以我的問題是如何如何我只能創造每1當我點擊OK（姓名，密碼ECT）

根據您的問題，您必須綁定OK按鈕上的事件，並且我只是做了一些更改以簡化您的鱈魚E：

$(document).ready(function() { 
 
    $("#button").click(function() { 
 
    $("#choix , #OK").toggle(); 
 
    }); 
 
    $("#OK").click(function() { 
 
    var $choix = $('#choix'); 
 
    var $txt = $choix.find(':selected').text(); 
 
    if ($choix.val() != '') { 
 
     $('#div').append('<p>' + $txt + '</p> <input type="' + $choix.val() + '" />'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" id="button">Add un champ</button> 
 
<select style="display:none" id="choix"> 
 
    <option value="">--Choisir--</option> 
 
    <option value="email">Email</option> 
 
    <option value="nom">Nom</option> 
 
    <option value="password">Password</option> 
 
    <option value="number">Number</option> 
 
</select> 
 
<button style="display:none" type="button" id="OK">OK</button> 
 

 
<form> 
 
    <div id="div"> 
 
    </div> 
 
</form>