3

「アイテム名」の列を含む、通常10〜30行の長さのHTMLテーブルがあります。ドロップダウン自体には、約 75 の製品から選択できます。ページ サイズを小さくするために、すべての行に 1 つのドロップダウン リストを再利用したいと考えました。

つまり、行をクリックすると、jQuery は

  1. TD のアイテム名を読む
  2. ドロップダウン リストを TD にロードする
  3. アクティブな値を前のテキスト値として選択します
  4. 行の終了時に、プロセスを逆にします

ドロップダウンの項目は、ページの読み込み時にデータベースから取り込まれます。リストを非表示にして、必要なときにのみその場所に表示するのが最善の方法だと思います。しかし、ステップ2と3を達成する方法がわかりません

編集

それが私の質問であるため、探しているコードがわからない。しかし、以下のようなものがある場合は、その非表示の選択リストをアクティブな行に配置し、テーブル セルに既にある値を選択する必要があります。

<table>
    <tr>
        <td>Item Name</td>
        <td>Item Value</td>
    </tr>
    <tr>
        <td>Product A</td>
        <td>166.22</td>
    </tr>
    <tr>
        <td>Product B</td>
        <td>166.22</td>
    </tr>
</table>

<select id="itemname" style="display:none;">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>

編集2 - 考えられる解決策

以下の回答の 1 つに基づいて、少し調べてみたところ、機能するこのスクリプトを作成できました。もっと効率的にできるかどうかはわかりませんが、探していたことができます。関数は "e" を TD として受け取ります

    function addItem(e) {
        if ($(e).find('select').length) {
            var input = $(e).find('select').eq(0);
            $(e).text($(input).val());
            $(input).appendTo($('.promotion-header'));
        }
        else {
            var text = $(e).text();
            $(e).text('');
            $('#itemname').appendTo(e).val(text).show();
        };
    }
4

1 に答える 1

1

.html() メソッドから html を設定および取得して、メイン div のすべての要素を他のすべての div にコピーしてみてください。このデモでは、 myDropDownListDivのすべての要素がanotherDivにコピーされます。

HTML :

<div id="myDropDownListDiv"><select id="itemname">
    <option value="2231A22">Product A</option>
    <option value="2231A21">Product B</option>
    <option value="2231A20">Product B</option>
</select>
</div>
    <div id="anotherDiv">
</div>

jQuery :

$(document).ready(function(){
    //copies all contents of myDropDownListDiv into anotherDiv
    $("#anotherDiv").html($("#myDropDownListDiv").html());
});

デモ

于 2013-10-30T00:33:34.060 に答える