ms-dropdown与ADD / REMOVE TR表选择框集成的Selectbox不起作用,

时间:2013-10-30 00:59:57

标签: jquery drop-down-menu jquery-selectbox msdropdown

我的选择框有问题。我使用ms-dropdown https://github.com/marghoobsuleman/ms-Dropdown并将其与我的ADD / REMOVE表格行集成。 这是整个jquery脚本。

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

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

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

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

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

            });

    $(".tech").msDropdown();    

});

这是表格

<table class="dynatable" align='center' id='dynatable' border='1'>
                        <thead>
                            <tr>
                                <th width='500px' colspan='2'>Window Type</th>
                                <th><button class="add">Add</button></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="prototype">
                                <td width='5px'>
                                    <span class='num'>1</span>
                                </td>
                                <td>
                                <input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' style='display:none;' checked/>
                                <select name='prod_type[]' class='tech' style='width:300px;'>   
                                    <option value='' data-description="Select Window/Door"></option><option value='Sample1' data-image="" data-description="This is sample 1">
                                            Sample 1
                                      </option><option value='Sample2' data-image="" data-description="This is sample 2">
                                            Sample 2
                                      </option><option value='Sample 3' data-image="" data-description="This is sample 3">
                                            Sample 3
                                      </select>                             

                                </td>
                                <td>
                                    <button class="remove">X</button>
                                </td>
                            </tr>
</table>

问题是,当您单击“添加”按钮时,它将附加一行,但似乎禁用了选择框。我想知道为什么会发生这种情况..请帮助我..提前谢谢。


这是小提琴: http://jsfiddle.net/jc_garcia0527/QzQ2q/

1 个答案:

答案 0 :(得分:0)

您好我已经看过您的代码....并且喜欢这个问题......

请参阅此 LINK 以查看已解决的代码...

解决此问题您需要在HTML代码中替换以下行

<input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' style='display:none;' checked/>

使用此代码行

<input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' checked/>

您只需删除style='display:none'

即可