有人可以帮帮我吗？
我正在努力建立一个订购系统，它一切顺利，但我们的顾问指出，我们需要让用户可以选择在一次交易中订购多个商品。这搞砸了我。我搜索了很多关于JQueries和JScripts的内容，但我终于走到了尽头。
我现在拥有的是：
HTML（orderform.html）：
<html>
<head> <link rel="stylesheet"
type="text/css"
href="css/contentFrame.css">
<script src="jscript/protoScript.js"></script>
<script src="jscript/jquery-1.11.3.js"></script>
<script src="jscript/JQueryTest.js"></script>
</head>
<meta charset="utf-8">
<title>Untitled Document</title>
<body>
<div class="formBlock">
<h2 id="formHeader">Order Form</h2>
<form method="POST" action="orderInfoReceiver.php">
<table align="center">
<tr>
<td height="100%">
<fieldset>
<legend>Contact Details</legend>
Last Name:
<br>
<input type="text" name="lName">
<br>
First Name:
<br>
<input type="text" name="fName">
<br>
Middle Name:
<br>
<input type="text" name="mName">
<br>
Email Address:
<br>
<input type="text" name="email">
</fieldset>
</td>
<td height="100%">
<fieldset>
<br>
<legend>Product Information</legend>
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Item Name:
<br>
<select id="product" name="product" onchange="setOptions()">
<option>Please Select an Item
<option>Dry Chemical
<option>HCFC 123 (Manual)
<option>HCFC 123 (Therman)
<option>HCFC 123 (Ceiling)
<option>HCFC 236 fa (Manual)
<option>HCFC 236 fa (Therman)
<option>HCFC 236 fa (Ceiling)
<option>AFFF (Steel Cylinder)
<option>AFFF (Stainless Cylinder)
<option>CO2 (Carbon Dioxide)
</select>
<br>
Capacity:
<br>
<select id="capacity" name="capacity">
<option> --
</select>
<input type="radio" name="type" value="New">New <input type="radio" name="type" value="Refill">Refill
<br>
<br>
Quantity:
<br>
<input type="number" min="0" name="quantity">
<br>
<br>
<br>
</div>
<input type="button" id="btnAdd" value="+"> <input type="button" id="btnDel" value="-">
</fieldset>
</td>
<td height="100%">
<fieldset>
<br>
<br>
<legend>Address</legend>
Street:
<br>
<input type="text" name="street">
<br>
<br>
City:
<br>
<input type="text" name="city">
<br>
<br>
<br>
</fieldset>
</td>
</tr>
</table>
<center><input type="submit" value="Submit"></center>
</form>
<br>
</div>
</body>
JQuery（JQueryTest.js）取自http://charlie.griefer.com并进行了一些修改。我有很多克隆代码，但这是我设法使用当前表单的唯一代码。
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone(true, true).attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').removeAttr('disabled');
// business rule: you can only add 5 names
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
JScript（protoScript.js）我也从搜索中得到了这个，但我忘记了什么网站：
function addOption(selectId) {
var x = document.getElementById(selectId);
var y = new Option('Test option W3C');
x.add(y,x.options[x.options.length]);
// for IE use x.add(y,2);
}
function appendOptionLast(selectID, num){
var elSel = document.getElementById(selectID);
var elOptNew = document.createElement('option');
elOptNew.text = num;
elOptNew.value = num;
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}
function removeAllOptions(selectID){
var elSel = document.getElementById(selectID);
elSel.options.length = 0
if (elSel.length > 0){
elSel.remove(0);
}
}
function addAllOptions(selectID, values){
var arrayLength = values.length;
for (var i = 0; i < arrayLength; i++) {
appendOptionLast(selectID,values[i]);
}
}
function setOptions(){
var product = document.getElementById("product");
// removeAllOptions('capacity');
document.getElementById('capacity').options.length = 0
var selIndex = product.selectedIndex;
if(selIndex == 1)
addAllOptions('capacity', ["2 lbs","3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs", "100 lbs", "150 lbs", "200 lbs"]);
else if(selIndex == 2){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 3){
addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs"]);
}
else if(selIndex == 4){
addAllOptions('capacity', ["10 lbs", "20 lbs"]);
}
else if(selIndex == 5){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 6){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 7){
addAllOptions('capacity', ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 8){
addAllOptions('capacity', ["10 lbs", "15 lbs", "20 lbs", "25 lbs", "50 lbs", "100 lbs", "200 lbs"]);
}
else if(selIndex == 9){
addAllOptions('capacity', ["20 lbs", "25 lbs", "50 lbs"]);
}
else if(selIndex == 10){
addAllOptions('capacity', ["5 lbs", "10 lbs", "15 lbs", "50 lbs"]);
}
else{
addAllOptions('capacity', ["--"]);
}
}
在onchange上使用<select id='product>'事件处理克隆表单时，我走到了尽头。
我也尝试使用clone(true, true)，但无法使其正常工作。
我也有自定义css，它只包含非常基本的设计，所以我认为没有必要包括。
请注意，我们只学习基本的HTML -up，直到我记得表格，基本的PHP，Java，C＃和SQL。这是我第一次尝试编写JScripts和JQueries，我遇到了困难。
答案 0 :(得分：1)
以下是一个有效的示例（我已删除了与该问题无关的大部分HTML）。
首先，元素id在整个html文档中必须是唯一的 ，
所以我从id s中删除了select。
然后，只需将正确的元素传递给setOptions中的onchange：
<select name="product" onchange="setOptions(this)">
在setOptions(product)我们还更改了代码以使用相对查询查找capacity选择，因为我们不能再使用#capacity：
var capacity = $(product).closest('div').find('select[name="capacity"]')[0];
function appendOptionLast(elSel, num){
var elOptNew = document.createElement('option');
elOptNew.text = num;
elOptNew.value = num;
try {
elSel.add(elOptNew, null); // standards compliant; doesn't work in IE
}
catch(ex) {
elSel.add(elOptNew); // IE only
}
}
function removeAllOptions(selectID){
var elSel = document.getElementById(selectID);
elSel.options.length = 0
if (elSel.length > 0){
elSel.remove(0);
}
}
function addAllOptions(elSel, values){
var arrayLength = values.length;
for (var i = 0; i < arrayLength; i++) {
appendOptionLast(elSel,values[i]);
}
}
function setOptions(product){
var capacity = $(product).closest('div').find('select[name="capacity"]')[0];
// removeAllOptions('capacity');
capacity.options.length = 0
var selIndex = product.selectedIndex;
if(selIndex == 1)
addAllOptions(capacity, ["2 lbs","3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs", "100 lbs", "150 lbs", "200 lbs"]);
else if(selIndex == 2){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 3){
addAllOptions(capacity, ["10 lbs", "15 lbs", "20 lbs"]);
}
else if(selIndex == 4){
addAllOptions(capacity, ["10 lbs", "20 lbs"]);
}
else if(selIndex == 5){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 6){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 7){
addAllOptions(capacity, ["3 lbs", "5 lbs", "10 lbs", "15 lbs", "20 lbs", "50 lbs"]);
}
else if(selIndex == 8){
addAllOptions(capacity, ["10 lbs", "15 lbs", "20 lbs", "25 lbs", "50 lbs", "100 lbs", "200 lbs"]);
}
else if(selIndex == 9){
addAllOptions(capacity, ["20 lbs", "25 lbs", "50 lbs"]);
}
else if(selIndex == 10){
addAllOptions(capacity, ["5 lbs", "10 lbs", "15 lbs", "50 lbs"]);
}
else{
addAllOptions(capacity, ["--"]);
}
}
////////////////////////////////
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#input' + num).clone(true, true).attr('id', 'input' + newNum);
// manipulate the name/id values of the input inside the new element
newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
// clear the options of the clone.
setOptions( $(newElem).find('select[name="product"]') );
// insert the new element after the last "duplicatable" input field
$('#input' + num).after(newElem);
// enable the "remove" button
$('#btnDel').removeAttr('disabled');
// business rule: you can only add 5 names
if (newNum == 5)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
$('#input' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').removeAttr('disabled');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="orderInfoReceiver.php">
<fieldset>
<br>
<legend>Product Information</legend>
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
Item Name:
<br>
<select name="product" onchange="setOptions(this)">
<option>Please Select an Item
<option>Dry Chemical
<option>HCFC 123 (Manual)
<option>HCFC 123 (Therman)
<option>HCFC 123 (Ceiling)
<option>HCFC 236 fa (Manual)
<option>HCFC 236 fa (Therman)
<option>HCFC 236 fa (Ceiling)
<option>AFFF (Steel Cylinder)
<option>AFFF (Stainless Cylinder)
<option>CO2 (Carbon Dioxide)
</select>
<br>
Capacity:
<br>
<select name="capacity">
<option> --
</select>
<input type="radio" name="type" value="New">New <input type="radio" name="type" value="Refill">Refill
<br>
<br>
Quantity:
<br>
<input type="number" min="0" name="quantity">
<br>
<br>
<br>
</div>
<input type="button" id="btnAdd" value="+"> <input type="button" id="btnDel" value="-">
</fieldset>
<center><input type="submit" value="Submit"></center>
</form>