Добавить новое раскрывающееся меню с JS

Я ищу, чтобы использовать JS, чтобы добавить новое раскрывающееся меню с нажатием кнопки, где элементы выпадающего меню создают текстовое поле при нажатии.Добавить новое раскрывающееся меню с JS

HTML:

<input id="btnAdd" type="button" value="Add" /> 
<br /> 
<br /> 
<div id="TextBoxContainer"> 
</div> 
<br />

JS:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
    var click_number = 0; 
    $("#btnAdd").bind("click", function() { 
     var div = $("<div />"); 
     var input = $("<div id='search'><label>Input &nbsp;<textarea rows='1' name='input_"+ click_number +"'><?php echo $_POST['input_". click_number ."']; ?></textarea></label></div>"); 
     input.appendTo('#TextBoxContainer'); 
     div.html(RemoveDynamicTextBox()); 
     $("#TextBoxContainer").append(div); 
     console.log(click_number); 
     click_number++; 
    }); 
    $("body").on("click", ".remove", function() { 
     for ($i=0; $i<2; $i++){ 
      $('#search').remove(); 
     } 
     click_number--; 
     console.log(click_number); 
    }); 

}); 

function RemoveDynamicTextBox() { 

    return "<input id='search' type='button' value='Remove' class='remove' />"; 

} 

</script>

В настоящее время, приведенный выше код добавляет текстовое поле и кнопку удалить с каждым нажатием кнопки. Затем я использую текстовое поле как входной пост, содержащий все это в форме с кнопкой отправки, поэтому я могу использовать вход в запросе mysqli. Я добавляю имя переменной post с номером щелчка, чтобы различать входы позже в запросе.

Я новичок в JS (поэтому, если я не предоставил достаточную информацию, дайте мне знать, и я отредактирую), но я хотел бы иметь множество различных вариантов ввода текстовых полей в выпадающем меню, добавляется нажатием кнопки. Затем, когда пользователь нажимает на элемент из выпадающего меню, он добавляется в виде ввода текстового поля. Таким образом, каждый раз, когда пользователь нажимает кнопку добавления, появляется новое раскрывающееся меню. Таким образом, теоретически я мог бы иметь 2 одинаковых ввода с различным увеличением их имени, которые впоследствии можно было бы дифференцировать. Кроме того, у меня будет кнопка удаления, удаляющая как добавленные текстовые поля, так и раскрывающееся меню, связанные с последним нажатием кнопки «Добавить».

источник

2016-06-24 Steven Somach

Используйте бутстрап, это сделает его очень простым. Скопируйте это в текстовый документ, сохраните его как .html и посмотрите на результат.

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Dropdowns</h2> 
    <p>The .dropdown class is used to indicate a dropdown menu.</p> 
    <p>Use the .dropdown-menu class to actually build the dropdown menu.</p> 
    <p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p> 
    <div class="dropdown"> 
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu"> 
     <li><label>Textbox:</label><input type="text"></input></li> 

    </ul> 
    </div> 
</div> 

</body> 
</html>

источник

2016-06-24 20:56:56

Это хороший пример того, как сделать выпадающее меню, но я думаю, что я еще задаюсь вопрос о том, как применить его к JS, так что я мог бы добавить несколько меню выпадающего. Кроме того, я ищу вместо текстового поля в раскрывающемся меню, чтобы иметь только текст, а затем, когда на него нажимается текст, динамически добавляется новое текстовое поле под выпадающим меню. –

Добавить новое раскрывающееся меню с JS

ответ

Смежные вопросы