我正在创建一个表单，其中根据最后一个输入的内容填充每个组合框。选择所有选项后，我会显示价格估算值。但是我需要一个提交按钮，这取决于做出的3个选项会带你到另一个链接。任何帮助表示赞赏，提前谢谢。 我的代码：
<!--
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
data_1 = new Option("3:2 Aspect (1.5 to 1)", "$");
data_2 = new Option("Square", "$$");
data_3 = new Option("Panoramic", "$$$");
data_4 = new Option("Split", "$$$$");
// second combo box
data_1_1 = new Option("8inch x 12inch (20x30cm)", "-");
data_1_2 = new Option("14inch x 20inch (36x51cm)", "-");
data_1_3 = new Option("20inch x 28inch (51x71cm)", "-");
data_2_1 = new Option("8inch x 8inch (20x20cm)", "--");
data_2_2 = new Option("12inch x 12inch (30x30cm)", "--");
data_2_3 = new Option("14inch x 14inch (36x36cm)", "--");
data_2_4 = new Option("20inch x 20inch (51x51cm)", "--");
data_3_1 = new Option("8inch x 20inch (20x51cm)", "---");
data_3_2 = new Option("12inch x 28inch (36x71cm)", "---");
data_4_1 = new Option("3x 8inch x 20inch (20x51cm)", "----");
data_4_2 = new Option("3x 12inch x 28inch (36x71cm)", "----");
data_4_3 = new Option("4x 8inch x 20inch (20x51cm)", "----");
data_4_4 = new Option("4x 12inch x 28inch (36x71cm)", "----");
// third combo box
data_1_1_1 = new Option("Laminate", "£34.98");
data_1_1_2 = new Option("Don't laminate", "£29.99");
data_1_2_1 = new Option("Laminate", "£49.98");
data_1_2_2 = new Option("Don't laminate", "£39.99");
data_1_3_1 = new Option("Laminate", "£89.98");
data_1_3_2 = new Option("Don't laminate", "£69.99");
data_2_1_1 = new Option("Laminate", "£29.98");
data_2_1_2 = new Option("Don't laminate", "£24.99");
data_2_2_1 = new Option("Laminate", "£40.48");
data_2_2_2 = new Option("Don't laminate", "£34.99");
data_2_3_1 = new Option("Laminate", "£47.98");
data_2_3_2 = new Option("Don't laminate", "£39.99");
data_2_4_1 = new Option("Laminate", "£69.98");
data_2_4_2 = new Option("Don't laminate", "£54.99");
data_3_1_1 = new Option("Laminate", "£41.98");
data_3_1_2 = new Option("Don't laminate", "£34.99");
data_3_2_1 = new Option("Laminate", "£77.98");
data_3_2_2 = new Option("Don't laminate", "£64.99");
data_4_1_1 = new Option("Don't laminate", "£79.99");
data_4_2_1 = new Option("Don't laminate", "£134.99");
data_4_3_1 = new Option("Don't laminate", "£94.99");
data_4_4_1 = new Option("Don't laminate", "£179.99");
//link combos
// other parameters
displaywhenempty = ""
valuewhenempty = -1
displaywhennotempty = "-select-"
valuewhennotempty = 0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i = parseInt(currentbox) + 1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
(document.getElementById("combo_" + i) != null)) {
son = document.getElementById("combo_" + i);
// I empty all options except the first one (it isn't allowed)
for (m = son.options.length - 1; m > 0; m--) son.options[m] = null;
// I reset the first option
son.options[0] = new Option(displaywhenempty, valuewhenempty)
i = i + 1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa = 'data'
i = 0
while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
(document.getElementById("combo_" + i) != null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_" + i + "\").selectedIndex")
if (i == currentbox) break;
i = i + 1
}
// filling the "son" combo (if exists)
following = parseInt(currentbox) + 1
if ((eval("typeof(document.getElementById(\"combo_" + following + "\"))!='undefined'")) &&
(document.getElementById("combo_" + following) != null)) {
son = document.getElementById("combo_" + following);
stringa = stringa + "_"
i = 0
while ((eval("typeof(" + stringa + i + ")!='undefined'")) || (i == 0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i == 0) && eval("typeof(" + stringa + "0)=='undefined'"))
if (eval("typeof(" + stringa + "1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options[" + i + "]=new Option(" + stringa + i + ".text," + stringa + i + ".value)")
i = i + 1
}
//son.focus()
i = 1
combostatus = ''
cstatus = stringa.split("_")
while (cstatus[i] != null) {
combostatus = combostatus + cstatus[i]
i = i + 1
}
return combostatus;
}
}
window.onload = function() {
document.getElementById("combo_2").onchange = function() {
document.getElementById("value").value = this.options[this.selectedIndex].value;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Choose your canvas type</p>
<form method="post" action="" id="canvasform">
<select name="combo0" id="combo_0" style="width:200px;" form="canvasform" onChange="change(this);">
<option value="value1">-select-</option>
<option value="value2">3:2 Aspect (1.5 to 1)</option>
<option value="value3">Square</option>
<option value="value4">Panoramic</option>
<option value="value5">Split</option>
</select>
<p>Choose your canvas size</p>
<select name="combo1" id="combo_1" style="width:200px;" form="canvasform" onChange="change(this)">
<option value="value1"></option>
</select>
<p>Would you like it laminated? (not available for split canvases)</p>
<select name="combo2" id="combo_2" style="width:200px;" form="canvasform" onChange="change(this);">
<option value="value1"></option>
</select>
<BR>
<BR>
</select>
<p>Price</p>
<input type="text" id="value" form="canvasform" readonly/>
</form>
答案 0 :(得分：0)
表格提交时;您可以检查所有选择已完成的内容，并可以计算更新的操作网址。请检查JS代码底部的$('#canvasform').submit(function (event)。我还在您的HTML代码中添加了<input type="submit" class="form-submit" />。
<!--
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
data_1 = new Option("3:2 Aspect (1.5 to 1)", "$");
data_2 = new Option("Square", "$$");
data_3 = new Option("Panoramic", "$$$");
data_4 = new Option("Split", "$$$$");
// second combo box
data_1_1 = new Option("8inch x 12inch (20x30cm)", "-");
data_1_2 = new Option("14inch x 20inch (36x51cm)", "-");
data_1_3 = new Option("20inch x 28inch (51x71cm)", "-");
data_2_1 = new Option("8inch x 8inch (20x20cm)", "--");
data_2_2 = new Option("12inch x 12inch (30x30cm)", "--");
data_2_3 = new Option("14inch x 14inch (36x36cm)", "--");
data_2_4 = new Option("20inch x 20inch (51x51cm)", "--");
data_3_1 = new Option("8inch x 20inch (20x51cm)", "---");
data_3_2 = new Option("12inch x 28inch (36x71cm)", "---");
data_4_1 = new Option("3x 8inch x 20inch (20x51cm)", "----");
data_4_2 = new Option("3x 12inch x 28inch (36x71cm)", "----");
data_4_3 = new Option("4x 8inch x 20inch (20x51cm)", "----");
data_4_4 = new Option("4x 12inch x 28inch (36x71cm)", "----");
// third combo box
data_1_1_1 = new Option("Laminate", "£34.98");
data_1_1_2 = new Option("Don't laminate", "£29.99");
data_1_2_1 = new Option("Laminate", "£49.98");
data_1_2_2 = new Option("Don't laminate", "£39.99");
data_1_3_1 = new Option("Laminate", "£89.98");
data_1_3_2 = new Option("Don't laminate", "£69.99");
data_2_1_1 = new Option("Laminate", "£29.98");
data_2_1_2 = new Option("Don't laminate", "£24.99");
data_2_2_1 = new Option("Laminate", "£40.48");
data_2_2_2 = new Option("Don't laminate", "£34.99");
data_2_3_1 = new Option("Laminate", "£47.98");
data_2_3_2 = new Option("Don't laminate", "£39.99");
data_2_4_1 = new Option("Laminate", "£69.98");
data_2_4_2 = new Option("Don't laminate", "£54.99");
data_3_1_1 = new Option("Laminate", "£41.98");
data_3_1_2 = new Option("Don't laminate", "£34.99");
data_3_2_1 = new Option("Laminate", "£77.98");
data_3_2_2 = new Option("Don't laminate", "£64.99");
data_4_1_1 = new Option("Don't laminate", "£79.99");
data_4_2_1 = new Option("Don't laminate", "£134.99");
data_4_3_1 = new Option("Don't laminate", "£94.99");
data_4_4_1 = new Option("Don't laminate", "£179.99");
//link combos
// other parameters
displaywhenempty = ""
valuewhenempty = -1
displaywhennotempty = "-select-"
valuewhennotempty = 0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i = parseInt(currentbox) + 1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
(document.getElementById("combo_" + i) != null)) {
son = document.getElementById("combo_" + i);
// I empty all options except the first one (it isn't allowed)
for (m = son.options.length - 1; m > 0; m--) son.options[m] = null;
// I reset the first option
son.options[0] = new Option(displaywhenempty, valuewhenempty)
i = i + 1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa = 'data'
i = 0
while ((eval("typeof(document.getElementById(\"combo_" + i + "\"))!='undefined'")) &&
(document.getElementById("combo_" + i) != null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_" + i + "\").selectedIndex")
if (i == currentbox) break;
i = i + 1
}
// filling the "son" combo (if exists)
following = parseInt(currentbox) + 1
if ((eval("typeof(document.getElementById(\"combo_" + following + "\"))!='undefined'")) &&
(document.getElementById("combo_" + following) != null)) {
son = document.getElementById("combo_" + following);
stringa = stringa + "_"
i = 0
while ((eval("typeof(" + stringa + i + ")!='undefined'")) || (i == 0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i == 0) && eval("typeof(" + stringa + "0)=='undefined'"))
if (eval("typeof(" + stringa + "1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options[" + i + "]=new Option(" + stringa + i + ".text," + stringa + i + ".value)")
i = i + 1
}
//son.focus()
i = 1
combostatus = ''
cstatus = stringa.split("_")
while (cstatus[i] != null) {
combostatus = combostatus + cstatus[i]
i = i + 1
}
return combostatus;
}
}
window.onload = function() {
document.getElementById("combo_2").onchange = function() {
document.getElementById("value").value = this.options[this.selectedIndex].value;
}
}
$('#canvasform').submit(function (event)
{
var action = '';
// compute action here...
var combo_0_selection = $("#combo_0").val();
var combo_1_selection = $("#combo_1").val();
var combo_2_selection = $("#combo_2").val();
action = combo_0_selection+"/"+combo_1_selection+"/"+combo_2_selection;
alert("newer action is "+action);
//set the newer action to form
//$(this).attr('action', action);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>Choose your canvas type</p>
<form method="post" action="" id="canvasform">
<select name="combo0" id="combo_0" style="width:200px;" form="canvasform" onChange="change(this);">
<option value="value1">-select-</option>
<option value="value2">3:2 Aspect (1.5 to 1)</option>
<option value="value3">Square</option>
<option value="value4">Panoramic</option>
<option value="value5">Split</option>
</select>
<p>Choose your canvas size</p>
<select name="combo1" id="combo_1" style="width:200px;" form="canvasform" onChange="change(this)">
<option value="value1"></option>
</select>
<p>Would you like it laminated? (not available for split canvases)</p>
<select name="combo2" id="combo_2" style="width:200px;" form="canvasform" onChange="change(this);">
<option value="value1"></option>
</select>
<BR>
<BR>
</select>
<p>Price</p>
<input type="text" id="value" form="canvasform" readonly/>
<input type="submit" class="form-submit" />
</form>