1

ちょっと下手な質問ですが、基本的にはユーザーが値をデータベースに追加するためのフォームがあります。フィールドの 1 つに、データベース フィールドの値を入力するドロップダウン ボックスが必要です。ただし、ユーザーは複数の選択ボックスが必要な場合があります (すべてのドロップダウン選択を同じデータベース フィールドにポストする必要があります)。

<form method="POST" action="addcocktail.php" >
                    <tr><td>Cocktail Name: </td><td><input type="text" name="cocktailname" /> </td></tr>
                    <tr><td>Ingredients: </td><td><input type="text" name="ingredients" /> </td></tr>
                    <select name="ingredientselect"> 
                    <option value="" selected="selected">Ingredient</option>
                    <option value="" selected="selected">Ingredient</option>
                    </select>
                    <input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">
                    <tr><td>How To: </td><td><input type="text" name="howto" /> </td></tr>
                <input type="submit" value="add" />
                </form>

基本的に選択オプションの1つを複製するJavascript関数が必要なので、ユーザーは必要な「成分」の数を選択できます。ボタンクリック時。(私は addElement をいじっていましたが、役に立ちませんでした)

また、データベースの値を選択ボックスのオプションに直接取り込む方法についても考えています。

どんな助けでも感謝します、ありがとう-Matt

4

3 に答える 3

2

HTML コードに誤りがあります。trと タグがありますが、tdタグがありませんtable。必要なものを取得する方法の例を次に示します。

<script type="text/javascript">

function addTextboxes() {
  var cont = document.getElementById("selects_container");
  cont.innerHTML += document.getElementById("first_select").innerHTML;
}
</script>
...
<div id="selects_container">
  <div id="first_select">
    <select name="ingredientselect[]"> 
      <option value="" selected="selected">Ingredient</option>
      <option value="" selected="selected">Ingredient</option>
    </select>
  </div>
</div>
<input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">

この方法は完璧ではなく、パフォーマンスの問題もありますが、簡単です。

選択の名前に追加する必要が[]あります。そうすれば、PHP ですべての選択の値を取得できます。

また、選択やオプションを乗算するのではなく、選択した値をテキストとしてページに追加することをお勧めします。選択した値を隠しinputタグに保存して、サーバーに渡すことができます。

<script type="text/javascript">
function addTextboxes() {
  var new_value = document.getElementById("the_select").value;
  document.getElementById("selected_values").value += new_value + ",";
  document.getElementById("selected_text").innerHTML += new_value + "<br>";
}
</script>
...
<input id="selected_values" name="selected_values" type="hidden">
<div id="selected_text"></div>
<select name="ingredientselect[]" id="the_select"> 
  <option value="" selected="selected">Ingredient</option>
  <option value="" selected="selected">Ingredient</option>
</select>
<input type="button" id="addingred" onclick="addTextboxes();" value="Add Ingredient">

サーバー側:

$selected_values_array = explode(",", $_POST["selected_values"]);
于 2012-04-21T23:36:11.767 に答える
0

オプションを複製するには：

var opt_val = $（ "select [name = ingredient_select]：selected"）。val（）;

$（ "select [name = ingredient_select]"）。append（ " <option value='" + opt_val + "' selected='selected'>Ingredient</option>"）

于 2012-04-21T23:26:48.760 に答える
0

Ajax を使用して、サーバーからクライアントにデータをプルし、JavaScript から SELECT を作成できます。

JavaScript では、SELECT を構築する方法が複数あります。

  • document.createElement他の選択肢と比較してどちらが遅いかのような DOM メソッドを使用します
  • SELECT と OPTIONS を文字列として構築し、innerHTML を使用して親コンテナーに挿入します。これは、DOM の方法よりもパフォーマンスが高速です。

HTH。

于 2012-04-21T23:16:23.497 に答える