Question

我正在设计一个可以捕获1到150行数据的webform，给出了在csv的给定行中提供的数据类型的定义。这些数据行完全相同，但我不知道在开始时会使用多少数据。我想从一行开始，让最终用户单击添加按钮添加新行。在W-3学校网站上有一个关于如何做到这一点的小教程： http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_select_create 但是我看到了一些问题。首先，它是马车。如果您转到该链接，然后点击“尝试它”。按钮它将创建一个简单的选择下拉列表。精彩！但是，如果再次单击它，则会创建一个空白，每次后续单击都会创建相同的空白。另一个问题是我需要使用的select元素是巨大的（160种可能的选项），并使用optgroup来保持它分离，这里的直观是一个示例：

<select name="data_value" id="data_value_selector">
    <optgroup label="Entity Provider">
        <option style="margin-left:12px;" value="name">Name</option>
        <option style="margin-left:12px;" value="dba">DBA</option>
        <option style="margin-left:12px;" value="facility_type">Facility Type</option>
    </optgroup>

    <optgroup label="Individual Provider"></optgroup>
        <optgroup style="margin-left:12px;" label="Name">
            <option value="full_name">Full Name</option>
            <option value="name_prefix">Prefix</option>
            <option value="first_name">First Name</option>
            <option value="middle_name">Middle Name</option>
            <option value="last_name">Last Name</option>
            <option value="name_suffix">Suffix</option>
            <option value="pro_suffix">Professional Suffix</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Birth Date">
            <option value="full_birth_date">Full Birth Date</option>
            <option value="day_of_birth">Day Of Birth</option>
            <option value="month_of_birth">Month Of Birth</option>
            <option value="year_of_birth">Year Of Birth</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Education">
            <option value="education_institution">Education Institution</option>
            <option value="education_city">Education City</option>
            <option value="education_county">Education County</option>
            <option value="education_state">Education State</option>
            <option value="education_country">Education Country</option>
            <option value="education_start_date">Education Start Date</option>
            <option value="education_end_date">Education End Date</option>
            <option value="graduation_date">Graduation Date</option>
            <option value="degree" >Degree</option>
        </optgroup>

    <optgroup label="Provider Information"></optgroup>
        <optgroup style="margin-left:12px;" label="Address">
            <option value="full_address">Full Address</option>
            <option value="address_1">Address 1</option>
            <option value="address_2">Address 2</option>
            <option value="address_city">City</option>
            <option value="address_county">County</option>
            <option value="address_state">State</option>
            <option value="address_zip_code">Zipcode</option>
            <option value="address_country">Country</option>
            <option value="address_csz">City/State/Zip</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Phone">
            <option value="phone_number">Number</option>
            <option value="phone_extension">Extension</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Singular Values">
            <option value="url">URL</option>
            <option value="tin">TIN Number</option>
            <option value="email">Email</option>
            <option value="dea_registration_number">DEA Regisration Number</option>
            <option value="npi_number">NPI Number</option>
            <option value="upin_number">UPIN Number</option>
        </optgroup>
        <optgroup style="margin-left:12px;" label="Provider Values">
            <option value="provider_value">Provider Value</option>
        </optgroup>
</select>

......这甚至不是整个选择对象。在W-3教程中，它将每个元素作为变量独立构建，并将它们单独添加到彼此中。正如您所看到的，这可能需要一些时间来编写，而且看起来非常笨重。我想定义一次select对象并让它以每次点击的方式复制（如果可能的话）。我想每个新创建的选择对象都需要一个唯一的名称，但我并不是100％肯定。如果是这种情况，有没有办法只在第一个的名称附加1，依此类推？

Answer 1

如果你想在jQuery中使用某些东西，可以使用clone()函数。参见：

$("#data_value_selector").clone().appendTo("#select-box");

Demo

我更改了name属性以发送所选值的集合。如果需要，可以在单击事件中将此行为更改为自定义名称：

var newSelect = $("#data_value_selector").clone();
newSelect.attr("name", "newName");
newSelect.appendTo("#select-box");

我希望这会对你有所帮助。

Answer 2

您可以使用cloneNode()方法。这是一个例子：

http://jsfiddle.net/JKNT4/7/

HTML

<button onclick="addRow()">Add Row</button>
<div id="parent_selector" class="data-row">
    <select name="data_value[]">
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
</div>
<div id="child_selectors"></div>

的Javascript

 function addRow() {
     var itm = document.getElementById("parent_selector");
     var cln = itm.cloneNode(true);
     cln.removeAttribute("id");
     document.getElementById("child_selectors").appendChild(cln);
 }

在Web表单中动态创建复杂的选择对象

2 个答案: