0

PHPを使用してデータベースに送信する必要があるウェブフォーム用の3つのドロップダウンと1つのテキスト入力フィールドを生成するこのスクリプトがあります。このフォームは HTML ですが、フィールドに入力するための JavaScript はこの部分だけです。この JavaScript を使用して、これらのドロップダウンとテキスト入力フィールドの約 15 セットを生成しています。(1 セット = 3 つのドロップダウンと 1 つの入力テキスト フィールド)。

私の質問は次のとおりです。ユーザーが最初のドロップダウンからオプションを選択した場合、他の2つのドロップダウンのオプションは、最初のドロップダウンで選択されたオプションに従って変更される必要があります。

私が望んでいたのは、このフィドルのドロップダウンから数を選択して必要な数のセットを生成した後、3 つのドロップダウンと 1 つの入力フィールドのセットを動的に生成することです。 

したがって、誰かが最初のドロップダウンからオプション 1 を選択すると、他のドロップダウンのオプションも変更する必要があります。 

JSFIDDLE

スクリプト：

<script>
$(function() {
    $("input[type=button][value=Add]").click(function(e) {
        for (i = 0; i < document.getElementById('sel').value; i++) {
            e.preventDefault();
            var j = 1;
            var newDiv = $("<div>").appendTo("#dropbox");
            $("<select>").attr("name", "input1_"+j).appendTo(newDiv).append(
            $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
            $("<select>").attr("name", "input2_"+j).appendTo(newDiv).append(
            $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
            $("<select>").attr("name", "input3_"+j).appendTo(newDiv).append(
            $("<option>").val("0").text("Option 1"), $("<option>").val("1").text("Option 2"));
            $("<input>").attr("name", "input4_"+j).appendTo(newDiv);
            $("<button>").text("Remove").appendTo(newDiv).click(function(e) {
                e.preventDefault();
                $(this).parent().remove();
            })
                j++;
        }
    })
})
</script>

HTML:

<form>
    <select id="sel">
        <option value="" selected="selected"></option>
                        <option value="01" >01</option>
                        <option value="02" >02</option>
                        <option value="03" >03</option>
                        <option value="04" >04</option>
                        <option value="05" >05</option>
                        <option value="06" >06</option>
                        <option value="07" >07</option>
                        <option value="08" >08</option>
                        <option value="09" >09</option>
                        <option value="10" >10</option>
                        <option value="11" >11</option>
                        <option value="12" >12</option>
                        <option value="13" >13</option>
                        <option value="14" >14</option>
                        <option value="15" >15</option>
                        </select>
    <input type="button" value="Add" />

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

2 に答える 2

0

jQuery を使用しているため、ドロップダウンに変更イベントを追加することをお勧めします。(リンクされた jQuery ドキュメント ページには完全な例が含まれています)。

他の 2 つのドロップダウンの入力に関しては、次のようないくつかのオプションがあります。

  1. 静的: ページを作成する PHP コードは、最初のドロップダウンでのユーザーの選択に応じて、必要なすべての可能なオプションを含む JavaScript 配列を埋めます。その後、変更イベントがトリガーされるたびに、JavaScript コードでこの配列を使用できます。

  2. 動的: ページの読み込み時にサブチョイスを予測または読み込むことができない場合は、jQuery ajaxリクエストを使用して、ユーザーの選択に一致するオプションをサーバーに照会します。また、JSONデータ形式 ( json_encode を使用して PHP でサポートされている)についても読みたいと思うかもしれません。

于 2012-10-13T11:41:29.670 に答える
0

デモ

セルとボタンに ID を与え、dom アクセスを jQuery に変更しました

「i」と「j」も使うようになりました

3 つの選択を同期させたいと仮定すると、コードは次のようになります。

$(function() {
  $("input[type=button][value=Add]").click(function(e) {
    e.preventDefault();
    for (var i=0,n=$('#sel').val();i<n; i++) {
      var newDiv = $("<div>").appendTo("#dropbox");
      for (var j=0;j<3;j++) {
        var id = "input"+i+"_"+j;
        $("<select>")
          .attr("id",id)
          .attr("name",id)
          .on("change",function() {
            // set all other select's value to this value
            $(this).siblings("select").val(this.value);
          })
          .append(
            $("<option>").val("0").text("Option 1"), 
            $("<option>").val("1").text("Option 2"))
          .appendTo(newDiv);
      } // j
      $("<input>")
          .attr("name", "input"+i+"_"+j)
          .appendTo(newDiv);
      $("<button>").text("Remove").appendTo(newDiv).click(function(e) {
        e.preventDefault();
        $(this).parent().remove();
      })
    } // i
  })
})​
于 2012-10-13T11:42:27.647 に答える