0

カテゴリと対応するサブカテゴリを含む JSON オブジェクトがあります。(テーブルの行として) 2 つのドロップダウンがあり、最初のドロップダウンにはカテゴリ リストが含まれています。特定のカテゴリが選択されると、2 番目のドロップダウンにサブ選択したカテゴリのカテゴリ。私はこれを行い、正常に動作しています。

今、行を動的に追加する必要があります。行の追加機能も正常に機能しています。

しかし、動的に追加された行のドロップダウン間の関係を確立できません。

理由はわかっています-動的に作成されたドロップダウンにIDを割り当てることができず、それらの間の関係を確立できません。

必要な関係を確立する方法を提案してください。

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<form id="myForm">
<TABLE id="dataTable" >
<TR><TD>
<select id="selectCategory" onchange="GetSelectedItem()">
<option>Choose a category</option>
</select>
</TD>
<TD>
<select id="selectSubCategory" >
<option>Choose a sub-category</option>
</select>
</TD></TR>
</TABLE>
</form>

脚本：

    <script><!--
var jsonObj={"category1":["subcat 1"],"category2":["subcat 2.1","subcat 2.2"],"category3":["subcat 3.1","subcat 3.2","subcat 3.3"]};
var keys= Object.keys(jsonObj);
    var category_dropdown = document.getElementById("selectCategory"); 
for (var keys in jsonObj)    {              
    category_dropdown[category_dropdown.length] = new Option(keys,keys);        
    }
function GetSelectedItem()      {
            var e = document.getElementById("selectCategory");
            var selectedCategory = e.options[e.selectedIndex].value;

            var sub_category_dropdown = document.getElementById("selectSubCategory");   
            document.getElementById("selectSubCategory").options.length=0; //clearing previous values of the drop-down list
            for(var i=0;i<jsonObj[selectedCategory].length;i++)             {
                sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i],jsonObj[selectedCategory][i]);    
            }
    }
function addRow(tableID) 
    {

        var table = document.getElementById(tableID); 
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
         var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
             newcell.innerHTML = table.rows[0].cells[i].innerHTML;
             newcell.childNodes[0].selectedIndex = 0;

        }
    }
//--></script>
4

1 に答える 1

1

問題は、動的に作成された要素を入力するときに、それにイベントを添付する必要があることです.jqueryを使用するとイベントを委任できますが、jqueryを使用しないため、addRow関数にeventListenerを追加しました.

しかし、同じ ID を持つ動的要素を作成しています。これは間違っています。HTML は要素ごとに 1 つの ID を指定します。そのため、ID をクラスに変更し、行要素ごとに特定の ID を持つ必要があります。HTML は壊れていても機能するため、コードに少しチェックを追加して、最初の行か動的に作成された行かを確認しました。これにより、イベントを (同じ ID を持つ) 選択ボックスのどれにアタッチするかがわかります。リスナー (getElementById最初に見つかったものを返します)。したがって、これは機能しますが、実際には悪い習慣です。

ミックスに jQuery を少しだけ追加しましたが、イベント リスナー用に取り外せます。

これはそのjsfiddleです。

http://jsfiddle.net/C2xsj/5/

ここにHTMLがあります

<INPUT type="button" value="Add Row" id="button"/>
<form id="myForm">
<TABLE id="dataTable" >
<TR><TD>
<select id="selectCategory">
<option>Choose a category</option>
</select>
</TD>
<TD>
<select id="selectSubCategory" >
<option>Choose a sub-category</option>
</select>
</TD></TR>
</TABLE>
</form>

そしてコード

$(function () {
    $('#selectCategory').change(function() {
        getSelectedItem(this, null);
    });

    $('#button').click(function() {
        addRow('dataTable');
    });

    var jsonObj = {"category1":["subcat 1"],"category2":["subcat 2.1","subcat 2.2"],"category3":["subcat 3.1","subcat 3.2","subcat 3.3"]};
var keys = Object.keys(jsonObj);
var category_dropdown = document.getElementById("selectCategory"); 

var getSelectedItem = function(element, row) {
    var e = element;
    var selectedCategory = e.options[e.selectedIndex].value;
    var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("selectSubCategory"));
    sub_category_dropdown.options.length=0;
    for (var i=0;i<jsonObj[selectedCategory].length;i++) {
        sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i],jsonObj[selectedCategory][i]);
    }
};

var addRow = function(tableID) {
        var table = document.getElementById(tableID); 
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

       for (var i = 0; i<colCount; i++) {
             var newcell = row.insertCell(i);
             newcell.innerHTML = table.rows[0].cells[i].innerHTML;
             newcell.childNodes[0].selectedIndex = 0;
    }
    var selects = row.getElementsByTagName("select");
    selects[0].addEventListener('change', function() { getSelectedItem(this, row) }, false);
};

    for (var keys in jsonObj) {              
        category_dropdown[category_dropdown.length] = new Option(keys,keys);        
    }   
});
于 2013-04-11T10:42:19.017 に答える