javascript - 基于Select Element动态克隆DIV

Question

我有一个表单，用户可以在其中将乘客添加到 list 中。根据航类可能有多少人，将决定向用户显示多少个 DIV(从 select 元素中选择)。可悲的是，我在浏览器论坛上呆了几个星期，并尝试了多种不同的方法和调整，但没有成功。有什么建议吗？

HTML(add_book.php):

    <?php 

$status = $data[status];
$hls_num = $data[hls_num];
$hls_id = $data[hls_id];
$hls_name = $data[hls_name];

?>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
 var pack_prices = new Array();
 <?php 
 $get_packprice  = "SELECT * FROM heli_type WHERE type_status = 'active' ORDER BY type_name";
 $packprice = mysql_query("$get_packprice");
 if ($price = mysql_fetch_array($packprice)) {
     do {
         if ($price[type_status] == 'active') {?>
          pack_prices["<?php echo $price[type_id];?>"]=<?php echo $price[type_cost]?>;
 <?php 
     } else {
 }
 } while ($price = mysql_fetch_array($packprice));
 }
 ?>

 var num_pass = new Array();
 num_pass["1"]=1;
 num_pass["2"]=2;
 num_pass["3"]=3;
 num_pass["4"]=4;
 num_pass["5"]=5;
 num_pass["6"]=6;

function getPackPrice()
{
    var startPackPrice=0;
    var theForm = document.forms["book"];
     var selectedPack = theForm.elements["bookpack"];
    startPackPrice = pack_prices[bookpack.value];
    return startPackPrice;
}

function getNumPass()
{
    var amountOfPass=0;
    var theForm = document.forms["book"];
     var selectedPass = theForm.elements["numpass"];
    amountOfPass = num_pass[numpass.value];
    return amountOfPass;
}

function calculateTotal()
{
    var PackPrice = getPackPrice() * getNumPass();
    var divobj = document.getElementById('baseamount').value = "$"+PackPrice;
    divobj.style.display='block';
    divobj.innerHTML = "$"+PackPrice;

}

function hideTotal()
{
    var divobj = document.getElementById('baseamount');
    divobj.style.display='none';
}

function populate(s1,s2){
    var s1 = document.getElementById(s1)
    var s2 = document.getElementById(s2)

    s2.innerHTML = "";
    if(s1.value == "airwork") {
        var optionArray = ["|--- Please Select Type of Airwork ---",
        <?php $get_airworkTypes = "SELECT * FROM heli_type WHERE type_cat = 'airwork' ORDER BY type_name";
$airworkTypes = mysql_query("$get_airworkTypes");
if ($airwork = mysql_fetch_array($airworkTypes)) {
    do {
        if ($airwork[type_status] == 'Active') {
            echo '"' .$airwork[type_id]. '|' .$airwork[type_name].'",';
                } else {
    } 
    } while ($airwork = mysql_fetch_array($airworkTypes));

}?>];
    }
    if(s1.value == "charter") {
        var optionArray = ["|--- Please Select Type of Charter ---",
        <?php $get_charterTypes = "SELECT * FROM heli_type WHERE type_cat = 'charter' ORDER BY type_name";
$charterTypes = mysql_query("$get_charterTypes");
if ($charter = mysql_fetch_array($charterTypes)) {
    do {
        if ($charter[type_status] == 'Active') {
            echo '"' .$charter[type_id]. '|' .$charter[type_name].'",';
                } else {
    } 
    } while ($charter = mysql_fetch_array($charterTypes));

}?>];
    }
    if(s1.value == "wedding") {
        var optionArray = ["|--- Please Select Wedding Package ---",
        <?php $get_weddingTypes = "SELECT * FROM heli_type WHERE type_cat = 'wedding' ORDER BY type_name";
$weddingTypes = mysql_query("$get_weddingTypes");
if ($wedding = mysql_fetch_array($weddingTypes)) {
    do {
        if ($wedding[type_status] == 'Active') {
            echo '"' .$wedding[type_id]. '|' .$wedding[type_name].'",';
                } else {
    } 
    } while ($wedding = mysql_fetch_array($weddingTypes));

}?>];
    }
    if(s1.value == "scenic") {
        var optionArray = ["|--- Please Select Duration of Scenic Flight ---",
        <?php $get_scenicTypes = "SELECT * FROM heli_type WHERE type_cat = 'scenic' ORDER BY type_name";
$scenicTypes = mysql_query("$get_scenicTypes");
if ($scenic = mysql_fetch_array($scenicTypes)) {
    do {
        if ($scenic[type_status] == 'Active') {
            echo '"' .$scenic[type_id]. '|' .$scenic[type_name].'",';
                } else {
    } 
    } while ($scenic = mysql_fetch_array($scenicTypes));

}?>];
    }
        if(s1.value == "specscen") {
        var optionArray = ["|--- Please Select Duration of Scenic Flight ---",
        <?php $get_specscenTypes = "SELECT * FROM heli_type WHERE type_cat = 'specscen' ORDER BY type_name";
$specscenTypes = mysql_query("$get_specscenTypes");
if ($specscen = mysql_fetch_array($specscenTypes)) {
    do {
        if ($specscen[type_status] == 'Active') {
            echo '"' .$specscen[type_id]. '|' .$specscen[type_name].'",';
                } else {
    } 
    } while ($specscen = mysql_fetch_array($specscenTypes));

}?>];
    }
    if(s1.value == "package") {
        var optionArray = ["|--- Please Select a Package ---",
        <?php $get_packs = "SELECT * FROM heli_type WHERE type_cat = 'package' ORDER BY type_name";
$packs = mysql_query("$get_packs");
if ($pack = mysql_fetch_array($packs)) {
    do {
        if ($pack[type_status] == 'Active') {
            echo '"' .$pack[type_id]. '|' .$pack[type_name].'",';
                } else {
    } 
    } while ($pack = mysql_fetch_array($packs));

}?>
];
    }
        if(s1.value == "discpack") {
        var optionArray = ["|--- Please Select a Package ---",
        <?php $get_packdiscTypes = "SELECT * FROM heli_type WHERE type_cat = 'discpack' ORDER BY type_name";
$packdiscTypes = mysql_query("$get_packdiscTypes");
if ($packdisc = mysql_fetch_array($packdiscTypes)) {
    do {
        if ($packdisc[type_status] == 'Active') {
            echo '"' .$packdisc[type_id]. '|' .$packdisc[type_name].'",';
                } else {
    } 
    } while ($packdisc = mysql_fetch_array($packdiscTypes));

}?>];
    }
    if(s1.value == "specpack") {
        var optionArray = ["|--- Please Select a Package ---",
        <?php $get_packspecTypes = "SELECT * FROM heli_type WHERE type_cat = 'specpack' ORDER BY type_name";
$packspecTypes = mysql_query("$get_packspecTypes");
if ($specdisc = mysql_fetch_array($packspecTypes)) {
    do {
        if ($packspec[type_status] == 'Active') {
            echo '"' .$packspec[type_id]. '|' .$packspec[type_name].'",';
                } else {
    } 
    } while ($packspec = mysql_fetch_array($packspecTypes));

}?>];
    }

    for(var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}

function cpyDIV(val)
{
    $("#repeat").empty();
    for (var i = 0; i < val -1; i++) {
        $("#passenger").clone().appendTo("#repeat");
        }
    }
</script>

<div class="form_contain">

<span style="color:#FF0000">*</span> - Required Fields<br />
<br />
<span style="color:#FF0000">!!!</span> - <i>For bookings with over 6 passengers, please create booking through the Events Page</i><br />
<br />

<form action="?page=book_add" method="post" name="add_booking" id="book" target="_self" enctype="multipart/form-data">

<div class="form_head">Booking Details</div>
<br />
<table cellpadding="2" cellspacing="4">

<tr>
<td class="form_label">Booking Type</td>
<td colspan="2"><select name="book_cat" id="booktype" class="form_d" onchange="populate(this.id,'bookpack')">
<option value="nothing">--- Select a Catergory ---</option>
<option value="airwork">Air Work</option>
<option value="charter">Charter</option>
<option value="wedding">Wedding Flights</option>
<option value="scenic">Scenic Flight</option>
<option value="specscen">Special Scenic Flight</option>
<option value="package">Packages</option>
<option value="discpack">Packages --- Red Balloon/Adrenalin</option>
<option value="specpack">Packages --- Specials</option>
</select></td>
</tr>

<div id="sub" class="sub">
<tr>
<td></td>
<td colspan="3" class="form_label">&nbsp;&nbsp;&nbsp;----> <select class="form_d" id="bookpack" name="book_type" onchange="calculateTotal()"></select></td>
</tr>
</div>

<tr>
<td class="form_label">Pick Up - Location</td>
<td><select class="form_c" name="book_pu_loc">
<option selected="selected">--- Select Location ---</option>
<?php $get_query = ("SELECT * FROM heli_hls WHERE status = 'Active' ORDER BY hls_name");
$query = mysql_query("$get_query");
if ($data = mysql_fetch_array($query)) {
    do {
        if ($data[status] == "Active") {?>
        <option value="<?php echo $data[hls_num] ?>"><?php echo $data[hls_name]?></option>
        <?php } else { 
        }
    } while ($data = mysql_fetch_array($query));
}
?>
</select></td>
</tr>

<tr>
<td class="form_label">Pick Up - Date</td>
<td><input name="book_date" class="form_f" type="date" required="required"/></td>
<td class="form_label">Pick Up - Time</td>
<td><input name="book_time" class="form_e" type="time" required="required"/></td>
</tr>

<tr>
<td class="form_label">Passengers</td>
<td valign="middle">

<select id="numpass" name="numpass" class="form_e" onchange="cpyDIV(this.value); getValue();"/>
<option value="1" selected="selected">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  </select>
</td>
</tr>

</table>

<div class="form_head">Payment Details</div>

<table width="100%">

<tr>
<td>

<table width="100%">
<tr><td class="form_label">Type: </td><td><select class="form_b" name="pay_type">
<option value="NULL">--- Payment Method ---</option>
<option value="cash">Cash</option>
<option value="eft">EFTPOS</option>
<option value="mstr">Mastercard</option>
<option value="visa">Visa</option>
<option value="amex">American Express</option>
<option value="house">House Voucher</option>
<option value="vouch">Gift Voucher</option>
<option value="inv">Invoice</option>
<option value="red">Red Balloon</option>
<option value="adren">Adrenalin</option>
<option value="promo">Promotional</option>
<option value="other">Other</option>
</select></td></tr>

<tr><td class="form_label">Payee Name:</td><td><input class="form_b" id="payee" name="payee"/></td></tr>
<tr><td class="form_label">Discount:</td><td><input class="form_a" name="paydisc" id="paydisc" onchange="getValue()"/></td></tr>
<!--<tr><td class="form_label">Total Amount:</td><td><input class="form_i" name="payamount" id="payamount" readonly="readonly" onchange="getValue()"/></td></tr>
--></table>

</td>
<td>

<table width="100%">
<tr><td class="form_label">Base Amount:</td><td><input type="text" name="baseamount" id="baseamount" class="form_i" readonly="readonly" onchange="getValue()"/></td></tr>
<tr><td class="form_label"> - Extra (Pick Up):</td><td><input type="text" name="extrapick" id="extrapick" class="form_e" onchange="getValue()"/></td></tr>
<tr><td class="form_label"> - Extra (Other):</td><td><input type="text" name="extraother" id="extraother" class="form_e" onchange="getValue()"/></td></tr>
<tr><td class="form_label"></td><td></td></tr>
</table>

</td>
</tr>

</table>

<div id="passenger" class="passenger">
<div class="form_head">Passenger - Details</div>
<br />
<table width="100%" cellpadding="2" cellspacing="4">

<tr>
<td class="form_label">First Name:&nbsp;<input type="text" name="cust_fname[]" class="form_f" required="required"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Last Name:&nbsp;<input type="text" name="cust_lname[]" class="form_f" required="required"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Weight (kg):&nbsp;<input type="text" name="cust_kg[]" class="form_a" required="required"/></td>
</tr>

<tr>
<td class="form_label">Phone:&nbsp;<input type="text" name="cust_phone[]" class="form_g" required="required"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Email:&nbsp;<input type="text" name="cust_email[]" class="form_d" /></td>
</tr>

<tr>
<td>
<table width="100%" cellpadding="2" cellspacing="4">
<tr><td class="form_label">Address:</td></tr>
<tr>
<td class="form_label">Number:&nbsp;<input type="text" name="cust_addr_num[]" class="form_a" />&nbsp;&nbsp;&nbsp;Street:&nbsp;<input type="text" name="cust_addr_street[]" class="form_b" />&nbsp;&nbsp;&nbsp;Suburb/Town:&nbsp;<input type="text" name="cust_addr_sub[]" class="form_f" /></td></tr>
<tr><td class="form_label">State:&nbsp;<input type="text" name="cust_addr_state[]" class="form_b" />&nbsp;&nbsp;&nbsp;Postcode:&nbsp;<input type="text" name="cust_addr_post[]" class="form_a" />&nbsp;&nbsp;&nbsp;Country:&nbsp;<select class="form_c" name="cust_addr_country[]">
<option value="">--- Select Country ---</option>
<option value="Australia">Australia</option>
<option value="Afghanistan">Afghanistan</option><option value="Akrotiri">Akrotiri</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option><option value="Angola">Angola</option><option value="Anguilla">Anguilla</option><option value="Antarctica">Antarctica</option><option value="Antigua and Barbuda">Antigua and Barbuda</option><option value="Argentina">Argentina</option><option value="Armenia">Armenia</option><option value="Aruba">Aruba</option><option value="Ashmore and Cartier Islands">Ashmore and Cartier Islands</option><option value="Austria">Austria</option><option value="Azerbaijan">Azerbaijan</option><option value="Bahamas, The">Bahamas, The</option><option value="Bahrain">Bahrain</option><option value="Bangladesh">Bangladesh</option><option value="Barbados">Barbados</option><option value="Bassas da India">Bassas da India</option><option value="Belarus">Belarus</option><option value="Belgium">Belgium</option><option value="Belize">Belize</option><option value="Benin">Benin</option><option value="Bermuda">Bermuda</option><option value="Bhutan">Bhutan</option><option value="Bolivia">Bolivia</option><option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option><option value="Botswana">Botswana</option><option value="Bouvet Island">Bouvet Island</option><option value="Brazil">Brazil</option><option value="British Indian Ocean Territory">British Indian Ocean Territory</option><option value="British Virgin Islands">British Virgin Islands</option><option value="Brunei">Brunei</option><option value="Bulgaria">Bulgaria</option><option value="Burkina Faso">Burkina Faso</option><option value="Burma">Burma</option><option value="Burundi">Burundi</option><option value="Cambodia">Cambodia</option><option value="Cameroon">Cameroon</option><option value="Canada">Canada</option><option value="Cape Verde">Cape Verde</option><option value="Cayman Islands">Cayman Islands</option><option value="Central African Republic">Central African Republic</option><option value="Chad">Chad</option><option value="Chile">Chile</option><option value="China">China</option><option value="Christmas Island">Christmas Island</option><option value="Clipperton Island">Clipperton Island</option><option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option><option value="Colombia">Colombia</option><option value="Comoros">Comoros</option><option value="Congo, Democratic Republic of the">Congo, Democratic Republic of the</option><option value="Congo, Republic of the">Congo, Republic of the</option><option value="Cook Islands">Cook Islands</option><option value="Coral Sea Islands">Coral Sea Islands</option><option value="Costa Rica">Costa Rica</option><option value="Cote d'Ivoire">Cote d'Ivoire</option><option value="Croatia">Croatia</option><option value="Cuba">Cuba</option><option value="Cyprus">Cyprus</option><option value="Czech Republic">Czech Republic</option><option value="Denmark">Denmark</option><option value="Dhekelia">Dhekelia</option><option value="Djibouti">Djibouti</option><option value="Dominica">Dominica</option><option value="Dominican Republic">Dominican Republic</option><option value="Ecuador">Ecuador</option><option value="Egypt">Egypt</option><option value="El Salvador">El Salvador</option><option value="Equatorial Guinea">Equatorial Guinea</option><option value="Eritrea">Eritrea</option><option value="Estonia">Estonia</option><option value="Ethiopia">Ethiopia</option><option value="Europa Island">Europa Island</option><option value="Falkland Islands (Islas Malvinas)">Falkland Islands (Islas Malvinas)</option><option value="Faroe Islands">Faroe Islands</option><option value="Fiji">Fiji</option><option value="Finland">Finland</option><option value="France">France</option><option value="French Guiana">French Guiana</option><option value="French Polynesia">French Polynesia</option><option value="French Southern and Antarctic Lands">French Southern and Antarctic Lands</option><option value="Gabon">Gabon</option><option value="Gambia, The">Gambia, The</option><option value="Gaza Strip">Gaza Strip</option><option value="Georgia">Georgia</option><option value="Germany">Germany</option><option value="Ghana">Ghana</option><option value="Gibraltar">Gibraltar</option><option value="Glorioso Islands">Glorioso Islands</option><option value="Greece">Greece</option><option value="Greenland">Greenland</option><option value="Grenada">Grenada</option><option value="Guadeloupe">Guadeloupe</option><option value="Guam">Guam</option><option value="Guatemala">Guatemala</option><option value="Guernsey">Guernsey</option><option value="Guinea">Guinea</option><option value="Guinea-Bissau">Guinea-Bissau</option><option value="Guyana">Guyana</option><option value="Haiti">Haiti</option><option value="Heard Island and McDonald Islands">Heard Island and McDonald Islands</option><option value="Holy See (Vatican City)">Holy See (Vatican City)</option><option value="Honduras">Honduras</option><option value="Hong Kong">Hong Kong</option><option value="Hungary">Hungary</option><option value="Iceland">Iceland</option><option value="India">India</option><option value="Indonesia">Indonesia</option><option value="Iran">Iran</option><option value="Iraq">Iraq</option><option value="Ireland">Ireland</option><option value="Isle of Man">Isle of Man</option><option value="Israel">Israel</option><option value="Italy">Italy</option><option value="Jamaica">Jamaica</option><option value="Jan Mayen">Jan Mayen</option><option value="Japan">Japan</option><option value="Jersey">Jersey</option><option value="Jordan">Jordan</option><option value="Juan de Nova Island">Juan de Nova Island</option><option value="Kazakhstan">Kazakhstan</option><option value="Kenya">Kenya</option><option value="Kiribati">Kiribati</option><option value="Korea, North">Korea, North</option><option value="Korea, South">Korea, South</option><option value="Kuwait">Kuwait</option><option value="Kyrgyzstan">Kyrgyzstan</option><option value="Laos">Laos</option><option value="Latvia">Latvia</option><option value="Lebanon">Lebanon</option><option value="Lesotho">Lesotho</option><option value="Liberia">Liberia</option><option value="Libya">Libya</option><option value="Liechtenstein">Liechtenstein</option><option value="Lithuania">Lithuania</option><option value="Luxembourg">Luxembourg</option><option value="Macau">Macau</option><option value="Macedonia">Macedonia</option><option value="Madagascar">Madagascar</option><option value="Malawi">Malawi</option><option value="Malaysia">Malaysia</option><option value="Maldives">Maldives</option><option value="Mali">Mali</option><option value="Malta">Malta</option><option value="Marshall Islands">Marshall Islands</option><option value="Martinique">Martinique</option><option value="Mauritania">Mauritania</option><option value="Mauritius">Mauritius</option><option value="Mayotte">Mayotte</option><option value="Mexico">Mexico</option><option value="Micronesia, Federated States of">Micronesia, Federated States of</option><option value="Moldova">Moldova</option><option value="Monaco">Monaco</option><option value="Mongolia">Mongolia</option><option value="Montserrat">Montserrat</option><option value="Morocco">Morocco</option><option value="Mozambique">Mozambique</option><option value="Namibia">Namibia</option><option value="Nauru">Nauru</option><option value="Navassa Island">Navassa Island</option><option value="Nepal">Nepal</option><option value="Netherlands">Netherlands</option><option value="Netherlands Antilles">Netherlands Antilles</option><option value="New Caledonia">New Caledonia</option><option value="New Zealand">New Zealand</option><option value="Nicaragua">Nicaragua</option><option value="Niger">Niger</option><option value="Nigeria">Nigeria</option><option value="Niue">Niue</option><option value="Norfolk Island">Norfolk Island</option><option value="Northern Mariana Islands">Northern Mariana Islands</option><option value="Norway">Norway</option><option value="Oman">Oman</option><option value="Pakistan">Pakistan</option><option value="Palau">Palau</option><option value="Panama">Panama</option><option value="Papua New Guinea">Papua New Guinea</option><option value="Paracel Islands">Paracel Islands</option><option value="Paraguay">Paraguay</option><option value="Peru">Peru</option><option value="Philippines">Philippines</option><option value="Pitcairn Islands">Pitcairn Islands</option><option value="Poland">Poland</option><option value="Portugal">Portugal</option><option value="Puerto Rico">Puerto Rico</option><option value="Qatar">Qatar</option><option value="Reunion">Reunion</option><option value="Romania">Romania</option><option value="Russia">Russia</option><option value="Rwanda">Rwanda</option><option value="Saint Helena">Saint Helena</option><option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option><option value="Saint Lucia">Saint Lucia</option><option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option><option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option><option value="Samoa">Samoa</option><option value="San Marino">San Marino</option><option value="Sao Tome and Principe">Sao Tome and Principe</option><option value="Saudi Arabia">Saudi Arabia</option><option value="Senegal">Senegal</option><option value="Serbia and Montenegro">Serbia and Montenegro</option><option value="Seychelles">Seychelles</option><option value="Sierra Leone">Sierra Leone</option><option value="Singapore">Singapore</option><option value="Slovakia">Slovakia</option><option value="Slovenia">Slovenia</option><option value="Solomon Islands">Solomon Islands</option><option value="Somalia">Somalia</option><option value="South Africa">South Africa</option><option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option><option value="Spain">Spain</option><option value="Spratly Islands">Spratly Islands</option><option value="Sri Lanka">Sri Lanka</option><option value="Sudan">Sudan</option><option value="Suriname">Suriname</option><option value="Svalbard">Svalbard</option><option value="Swaziland">Swaziland</option><option value="Sweden">Sweden</option><option value="Switzerland">Switzerland</option><option value="Syria">Syria</option><option value="Taiwan">Taiwan</option><option value="Tajikistan">Tajikistan</option><option value="Tanzania">Tanzania</option><option value="Thailand">Thailand</option><option value="Timor-Leste">Timor-Leste</option><option value="Togo">Togo</option><option value="Tokelau">Tokelau</option><option value="Tonga">Tonga</option><option value="Trinidad and Tobago">Trinidad and Tobago</option><option value="Tromelin Island">Tromelin Island</option><option value="Tunisia">Tunisia</option><option value="Turkey">Turkey</option><option value="Turkmenistan">Turkmenistan</option><option value="Turks and Caicos Islands">Turks and Caicos Islands</option><option value="Tuvalu">Tuvalu</option><option value="Uganda">Uganda</option><option value="Ukraine">Ukraine</option><option value="United Arab Emirates">United Arab Emirates</option><option value="United Kingdom">United Kingdom</option><option value="United States">United States</option><option value="Uruguay">Uruguay</option><option value="Uzbekistan">Uzbekistan</option><option value="Vanuatu">Vanuatu</option><option value="Venezuela">Venezuela</option><option value="Vietnam">Vietnam</option><option value="Virgin Islands">Virgin Islands</option><option value="Wake Island">Wake Island</option><option value="Wallis and Futuna">Wallis and Futuna</option><option value="West Bank">West Bank</option><option value="Western Sahara">Western Sahara</option><option value="Yemen">Yemen</option><option value="Zambia">Zambia</option><option value="Zimbabwe">Zimbabwe</option></select></td></tr></table>
</td></tr></table>
</div>

<div id="repeat" class="repeat"></div>

<table width="100%">
<tr>
<td colspan="4" style="text-align:right;">
<input type="submit" value="Book Now!" /></td>
</tr>
</table>
</form>
</div>

PHP - 操作文件 (book_add.php):

<?php 

$numpass = $_POST[numpass];

//Booking Details
$book_cat = $_POST[book_cat]; 
$book_type = $_POST[book_type]; 
$book_pu_loc = $_POST[book_pu_loc]; 
$book_date = $_POST[book_date]; 
$book_time = $_POST[book_time];

//Payment Details
$baseamount = $_POST[baseamount];
$payamount = $_POST[payamount];
$pay_type = $_POST[pay_type];
$payee = $_POST[payee];
$paydisc = $_POST[paydisc];
$extraother = $_POST[extraother];
$extrapick = $_POST[extrapick];

foreach ($_POST['cust_fname'] as $cust_num => $cust_fname) {
}
foreach ($_POST['cust_lname'] as $cust_num => $cust_lname) {
}
foreach ($_POST['cust_kg'] as $cust_num => $cust_kg) {
}
foreach ($_POST['cust_phone'] as $cust_num => $cust_phone) {
}
foreach ($_POST['cust_email'] as $cust_num => $cust_email) {
}
foreach ($_POST['cust_addr_num'] as $cust_num => $cust_addr_num) {
}
foreach ($_POST['cust_addr_street'] as $cust_num => $cust_addr_street) {
}
foreach ($_POST['cust_addr_sub'] as $cust_num => $cust_addr_sub) {
}
foreach ($_POST['cust_addr_state'] as $cust_num => $cust_addr_state) {
}
foreach ($_POST['cust_addr_country'] as $cust_num => $cust_addr_country) {
}
foreach ($_POST['cust_addr_post'] as $cust_num => $cust_addr_post) {
}

print_r (array($cust_fname));

/*

//Insert Customers
$insert_customer = "INSERT INTO heli_cust (cust_fname, cust_lname, cust_kg, cust_phone, cust_email, cust_addr_num, cust_addr_street, cust_addr_sub, cust_addr_state, cust_addr_country, cust_addr_post) VALUES ('$cust_fname', '$cust_lname', '$cust_kg', '$cust_phone', '$cust_email', '$cust_addr_num', '$cust_addr_street', '$cust_addr_sub', '$cust_addr_state', '$cust_addr_country', '$cust_addr_post')";

mysql_query($insert_customer) or die("<table width='100%'><tr><td valign='middle'><img src='images/fail.png'></td><td valign='middle'> - Customer - Unable to insert into database! Error - " .mysql_error(). "</td></tr></table>");

echo "<table width='100%'><tr><td valign='middle'><img src='images/complete.png'></td><td valign='middle'> - Customers - Inserted into Table!</td></tr></table>";
/*
//Insert Booking into Booking Table -- Need: Customer ID Numbers

$customers = "SELECT * FROM heli_cust
ORDER BY cust_id DESC
LIMIT " .$numpass;
$get_customers = mysql_query("$customers") or die ("<table width='100%'><tr><td valign='middle'><img src='images/fail.png'></td><td valign='middle'> - Customer 1 - Unable to insert into database! Error - " .mysql_error(). "</td></tr></table>");


if ($custs = mysql_fetch_array($get_customers)) {
    do {
        if ($custs[cust_id] >0) {
            echo $custs[cust_fname];
        } else {
        }
    } while ($custs = mysql_fetch_array($get_customers));
}

/*

$insert_book = "INSERT INTO heli_book (book_cat, book_type, book_pu_loc, book_date, book_time, book_pax1, book_pax2, book_pax3, book_pax4, book_pax5, book_pax6, book_made_u, book_made_d, book_made_t) VALUES ('$book_cat', '$book_type', '$book_pu_loc', '$book_date', '$book_time', '$cust1id', '$cust2id', '$cust3id', '$cust4id', '$cust5id', '$cust6id', '$user', '$date', '$time')";

mysql_query($insert_book) or die("<table width='100%'><tr><td valign='middle'><img src='images/fail.png'></td><td valign='middle'> - Booking - Unable to insert into database!</td></tr></table>");
?>

Updating... 

Answer 1

方法如下:

$("copy_source_selector").clone().appendTo( "copy_destination_location_selector" );

或者 .appendTo 的任何合理替代方案都可以满足您的目标，但副本是由 .clone() 创建的。

这是您需要适应的:

<body>
    <select onchange="cpyDIV(this.value)">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select>

    <div id="passenger">123</div>

    <div id="dest">dest</div>

            <script>

                function cpyDIV(val)
                {
                    $("#dest").empty();

                    for (var i = 0; i < val; i++) {
                        var $clone = $("#passenger").clone();
                        $clone[0].id += i;
                        $clone.appendTo("#dest");
                    }

                }


            </script>
</body>