0

私が達成しようとしていることのモックアップの例

画像に示されている機能を実現しようとしています。

これらは私が持っている質問のいくつかであり、あなたの意見をいただければ幸いです。

  • divに入力の行があり、それを複製する必要がありますか？
  • フォーム要素の名前は一致する配列（name = "firselement []"）である必要がありますか？
  • [選択]が選択されていない場合、空として渡されますか、それともスキップされますか？行をDBのレコードとして維持する必要があり、入力が欠落していると配列の順序が乱れることを望まない

これを達成するためのヒントは大歓迎です。

4

3 に答える 3

1

<select>常に値を渡します。何も選択されていない場合は、デフォルトのものが選択されます。最初のものは、場合によっては値を持つ可能性があります''。

name="field[]"前述のように使用します。次に、すべてのフィールドの HTML を簡単に複製できます。システムは、入力のキーと各行に関連するキーを持つ選択を使用して、それらを配列として識別します。

基本的に、システムの検証はselect-nameが各配列キーの値を取得したことです。たとえば、送信されたテキスト入力の配列に基づいて配列キーを作成できます。

于 2012-07-30T11:03:38.400 に答える
0

ここで、上記のクエリの完全なソリューション ビンを作成しました。以下のようにデモリンクを確認できます。

デモ: http://codebins.com/bin/4ldqp99

HTML:

<div id="panel">
  <form id="frm1">
    <div id="table1">
      <div class="row">
        <div class="input">
          <input type="text" size="18" name="frmtext[]"/>
        </div>
        <div class="input">
          <select name="selop1[]">
            <option value="0">
              --select--
            </option>
            <option value="1">
              option1
            </option>
            <option value="2">
              option2
            </option>
            <option value="3">
              option3
            </option>
          </select>
        </div>
        <div class="input">
          <select name="firselement[]">
            <option value="0">
              --select--
            </option>
            <option value="firselement1">
              firselement1
            </option>
            <option value="firselement2">
              firselement2
            </option>
            <option value="firselement3">
              firselement3
            </option>
          </select>
        </div>
        <div class="input">
          <a href="javascript:void(0);" class="delete">
            Delete
          </a>
        </div>

      </div>

      <div class="action">
        <a  href="javascript:void(0);" id="addrow">
          Add Row
        </a>
      </div>
    </div>
  </form>
</div>

CSS:

#table1{
  background:#22559d;
  width:500px;
  padding:10px;
}
.row{
  width:450px;
  padding:5px;
  margin-top:2px;
  border:1px solid #dcada9;
}
.input{
  display:inline-block;
  margin: 0 10px 0 10px;
}
input, select{
  border:1px solid #adada9;
}
#table1 a{
  color:#fdddda;
  text-decoration:none;
}
#table1 a:hover{
  text-decoration:underline;
}

JQuery:

  $(function() {
    $("#addrow").click(function() {
        $('.row:last').clone().insertAfter(".row:last");
        $('.row:last').find("a.delete").live('click', delRow);

        //Bind Delete Link Shows on Newly Added Row
        $("a.delete").live('click', delRow);

        /*--Here You can remove following scripts If you dont want to keep selected drop down option as on previous row ---  */
        $('.row:last').find("select:eq(0)").val($('.row:last').prev(".row").find("select:eq(0)").val());

        $('.row:last').find("select:eq(1)").val($('.row:last').prev(".row").find("select:eq(1)").val());
        /* --End of script for Selecting Drop down values --*/

    });

});

function delRow() {
    $(this).parents(".row").remove();
    if ($(".row").length <= 0) {
        $(".action").hide();
    }
}

デモ: http://codebins.com/bin/4ldqp99

于 2012-07-30T13:13:57.603 に答える