ドロップダウンメニューテーブル.2番目の列の値は最初の列の値に依存します

Question

私のcopanyは私に内部用のWebサイトの開発を依頼しました。このウェブサイトには、複数の行と列のドロップダウンメニューがあるフォームが含まれています。

最初の列には販売する製品のタイプが含まれ、2番目の列にはデバイスのサブタイプが含まれています。 （例：Type1 - Model1、Type1 - Model2）

複数の行を持つ目的は複数のデバイスを同時にアップロードできるようにすることです。 これまでのところ、私はこれを作ってみた：

<tr><td><select name="category"> 
     <option value="0">-</option> 
     <option value="1">Type1</option> 
     <option value="2">Type2</option> 
     <option value="3">Type3</option> 
     <option value="4">Type4</option> 
    </select></td> 
    <td><select name="items"> 
     <option value="3">-</option> 
    </select> </td> </tr> 
    <tr><td><select name="category"> 
     <option value="0">-</option> 
     <option value="1">Type1</option> 
     <option value="2">Type2</option> 
     <option value="3">Type3</option> 
     <option value="4">Type4</option> 
    </select></td> 
    <td><select name="items"> 
     <option value="3">-</option> 
    </select> </td> </tr> 

そして、スクリプト部分：製品とモデルのリストが大幅に変更されませんよう

var categories = { 
    "-": [{value: '3',text: '-'}], 
    "Type1": [{value: '1',text: 'model1'}, {value: '2',text: 'model2'}], 
    "Type2": [{value: '4',text: 'model3'}, {value: '10',text: 'model4'}], 
    "Type3": [{value: '6',text: 'model5'},{value: '6',text: 'model6'}, {value: '7',text: 'model7'}], 
    "Type4": [{value: '8',text: 'model8'}, {value: '9',text: 'model9'}, {value: '11',text: 'model10'}, {value: '12',text: 'model11'}, {value: '13',text: 'DELUXE EDITION'}] 
}; 

function selectchange() { 
    var select = $('[name=items]'); 
    select.empty(); 

    $.each(categories[$(':selected', this).text()], function() { 
    select.append('<option value="' + this.value + '">' + this.text + '</option>'); 
    }); 
} 
$(function() { 
    $('[name=category]').on('change', selectchange); 
}); 

は、私は、データベースを必要といけません。 私の問題は次のとおりです。たとえば、2番目の行のサブタイプを変更すると、最初の行のサブタイプも変更されます。すべての行を個別に動作させるためにスクリプトで変更する必要があるのは何ですか？ （私は配列としてすべての値$ _POSTをできれば最善のようになります。）ここ

ワーキングJFiddle例： https://jsfiddle.net/L2cwqrus/

Answer 1

<select>要素の両方のあなたのペアが同じ名前を持つようにそれはあなたが$('[name=items]')を行うと、jQueryの一致すべての要素を選択し、あなたの.append()呼び出しが両方のドロップダウンメニューに項目を追加します。見えます。

彼女eは1つのソリューションを示すためにドロップダウンの各ペアに別々の名前を使用するJSFiddleです：https://jsfiddle.net/prutbkr8/

Answer 2

フィールド名が各行に異なる必要がある - 例えば、category_1、items_1、 category_2、items_2。

selectchange（）関数（たとえばselectchange_1、selectchange_2など）を繰り返さないようにするには、すべてのcategory_xxフィールドにclass（たとえばclass = "category" on（ 'change' ...）$（ '。category'）。on（ 'change' ...）を選択し、idからselectchange（）に番号を渡します。