Question

我正在尝试创建一个动态表，允许用户从大约100个变量中进行选择。这些变量已被分为几类，我已经在第二个select中显示它们，这取决于用户在第一个select中选择一个值。我一直在网上搜索答案，并且空白了。我意识到clone（）调用将复制所有数据，因此id是行的不良选择。

以下是我目前对HTML的看法：

        <body>
                <table name='myTable' class="dynatable">
                    <thead>
                        <tr>
                            <th class='idCol' >ID</th>
                            <th>Category</th>
                            <th>Metric</th>
                            <th>Conditional</th>
                            <th><button class="add">Add</button></th>
                        </tr>
                    </thead>
                    <tbody>
                        <form name='myForm'>
                            <tr class="first">
                                <td class="id idCol"><input type="text" name="id[]" value="0" /></td>
                                <td><select name='categories' onChange='updatemetrics(this.selectedIndex)' style="width: 260px">
                                    <option selected>--Select Category--</option>
                                    <option value='1'>Customer Experience</option>
                                    <option value='2'>Key Satisfaction Identifiers</option>
                                    <option value='3'>Personnel Costs</option>
<!-- I have cut the rest out for the sake of brevity. -->
                                    </select></td>

<!-- This is the select that populates based on the user's choice. -->
    <td><select style="width: 310px"name='metrics'></select></td>
                            </tr>
                    </form>
                </tbody>
            </table>
             </body>

我正在使用的Javascript如下。

$(document).ready(function() {
            var id = 0;

            // Add button functionality
            $("table.dynatable button.add").click(function() {
                id++;
                var master = $(this).parents("table.dynatable");

            // Get a new row based on the prototype row
                var prot = master.find(".prototype").clone(true);
                prot.attr("class", "")
                prot.find(".id").attr("value", id);

                master.find("tbody").append(prot);
            });

            // Remove button functionality
            $("table.dynatable button.remove").live("click", function() {
                $(this).parents("tr").remove();

            });
        });

        //script for dynamically populating the metrics select
        var metricCategories=document.myForm.categories;
        var metricList=document.myForm.metrics;

        var metrics=new Array()
        metrics[0]=" "                      
        metrics[1]=['Wait time average|waitInLine','Mystery Shopper Scores|mysteryScores']
        metrics[2]=['Referral Rate|ref_rate','Facebook Shares|facebook_shares','Twitter Followers|twit_followers','Customer Complaint Calls|comp_calls']
        metrics[3]=['Pension Payouts|pension_pay', 'Full Time Employees|ftes', 'Part Time Employees|ptes', 'Contractor Costs|contract_costs']

        function updatemetrics(selectedMetricGroup){
            metricList.options.length=0
            if (selectedMetricGroup>0) {
                for (i=0; i<metrics[selectedMetricGroup].length; i++)
                metricList.options[metricList.options.length]=new Option(metrics[selectedMetricGroup][i].split("|")[0], metrics[selectedMetricGroup][i].split("|")[i])
            }
        }

任何帮助将不胜感激。为了重申我寻求帮助的原因，我需要添加/删除包含相互交互的select个节点的行。提前谢谢。

无法克隆一组彼此依赖的选择

0 个答案: