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>

現在、上記のコードテキストボックスを追加し、各ボタンのクリックでボタンを削除します。私はテキスト変数をポスト変数として使用していますが、この中にはsubmitボタンを含むフォーム内にすべてが入っていますので、mysqliクエリで入力を使うことができます。クエリの後の入力を区別するために、ポスト変数の名前をクリック番号で増やします。

私は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で新しいドロップダウンメニューを追加する

答えて

関連する問題