过去一个月我一直在制作产品配置器,并从Stackoverflow获得了一些非常棒的帮助。我回来寻求一些帮助。在继续之前,我已经谷歌寻求答案,查看Stackoverflow,并尝试自己搞乱代码。我也是编码的新手,所以我知道代码并不完美。
无论如何,我的代码通过从下拉列表或复选框中选择一个选项来工作,并将其值放在最后的输入文本框中。 我想要实现的是在“选项”部分(这些都是复选框)中,我希望值在选中时出现在名为“completeText”的输入文本框中,并在未选中时消失。 我找到了一些效果很好的代码,但是如果我在“选项”之前选中了所有下拉菜单,然后选中了一个复选框,它会清除整个框,但该复选框的值除外。 我需要复选框值附加到其他下拉选项。最后的部件号应该是相互附加的所有值,用“ - ”分隔。再次,我尝试了很多不同的方法来实现这一点,到目前为止一直没有成功。任何方向或帮助都将是奇妙的!非常感谢你,如果有人想帮助我的HTML / JS以供参考(警告长代码):
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/samplepicture.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/options.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/sampleso.js"></script>
</head>
<br>
<div style="width: 900px; float: left; margin-left: 30px;"><h1><font face="bebas neue" size="15">Design your own</font></h1>
<div style="width: 520px; float: left; padding-right:30px;">
<h4 style="line-height:24px;"><font face="bebas neue" size="6">Heated Sample Lines</font></h4><br><br><br><br><br><br>
<img id="image" border="5" src='http://www.flexotherm.net/images/START2' height="253px" width="450px">
</div>
<div class="choices" style="width: 300px; float: right; padding: 20px; background-color: #eee;">
<div>
<body>
<form id="example" name="example">
<b>Series Type</b><br>
<select id="series" onchange="updateText('series')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="HSL">Heated Sample Lines</option>
</select>
<br>
<br>
<b>Tube Material</b><br>
<select id="tube" onchange="updateText('tube')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="E">PTFE Teflon®</option>
<option value="P">PFA Teflon®</option>
<option value="F">FEP</option>
<option value="PE">PEEK</option>
<option value="N11">Nylon 11</option>
<option value="S">316 Stainless Steel</option>
<option value="EPS">Electropolished Stainless Steel</option>
<option value="CS">Corrugated Stainless Steel (Overbraided)</option>
<option value="ESSBT">PTFE Stainless Steel Overbraided Teflon®</option>
<option value="PSSBT">PFA Stainless Steel Overbraided Teflon®</option>
</select>
<br>
<br>
<b>Tube Size</b><br>
<select id="size" onchange="updateText('size')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="4/2">1/4” O.D. x 1/8” I.D. (0.635cm x 0.318cm)</option>
<option value="4/3">1/4” O.D. x 3/16” I.D. (0.635cm x 0.476cm)</option>
<option value="6/4">3/8” O.D. x 1/4” I.D. (0.953cm x 0.635cm)</option>
<option value="6/5">3/8” O.D. x 5/16” I.D. (0.953cm x 0.794cm)</option>
<option value="/8">PTFE</option>
<option value="4">1/4” O.D. x 0.035” Wall (0.635cm x 0.089cm)</option>
<option value="5">5/16” O.D. x 0.035” Wall (0.7938cm x 0.089cm)</option>
<option value="6">3/8” O.D. x 0.035” Wall (0.953cm x 0.089cm)</option>
<option value="8">1/2” O.D. x 0.035” Wall (1.27cm x 0.089cm)</option>
<option value="4C">1/4" O.D.</option>
<option value="6C">3/8" O.D.</option>
<option value="8C">1/2” O.D.</option>
</select>
<br>
<br>
<b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">110 / 115 / 120 VAC</option>
<option value="B">208 VAC</option>
<option value="C">220 / 230 / 240 VAC</option>
<option value="D">440 / 450 / 460 VAC</option>
<option value="E">12 VDC</option>
<option value="F">24 VDC</option>
</select>
<br>
<br>
<b>Power Connector</b><br>
<select id="connector" onchange="updateText('connector')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">7 Pin AMP™ (Power Pins 3-5)</option>
<option value="T">Mini Twist Lock (NEMA ML2-15)</option>
<option value="T2">Mini Twist Lock (NEMA ML3-15)</option>
<option value="W">Straight-Blade (NEMA 5-15)</option>
<option value="M">Molex 3 - Pin</option>
<option value="L">LAPP</option>
<option value="N">None - Flying Leads</option>
<option value="S">Special / Custom</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
<select id="senseconnect" onchange="updateText('senseconnect')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Miniture</option>
<option value="S">Standard</option>
<option value="F">Flying Leads</option>
</select>
<br>
<br>
<b>Sensor Placement</b><br>
<font size="1">After selection, specify length from lead or non-lead side</font>
<select id="placement" onchange="updateText('placement')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="N">T/C Non-Lead Side</option>
<option value="L">Lead Side</option>
</select> <select id="length" onchange="updateText('length')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="1">1 ft.</option>
<option value="2">2 ft.</option>
<option value="3">3 ft.</option>
<option value="4">4 ft.</option>
<option value="5">5 ft.</option>
<option value="6">6 ft.</option>
<option value="7">7 ft.</option>
<option value="8">8 ft.</option>
<option value="9">9 ft.</option>
<option value="10">10 ft.</option> </select>
<br>
<br>
<b>Operating Temperature</b><br>
<input type="text" id="temperature" onchange="updateText('temperature')" /> <font size="2"> °F</font>
<script>
document.getElementById("temperature").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1°F - 9999°F");
return;
}
</script> <br><br>
<b>Exterior Sleeve</b><br>
<select id="sleeve" onchange="updateText('sleeve')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Black Nylon Mesh</option>
<option value="CT">Adaptaflex Corrugated Tubing</option>
<option value="A">Aluminized Gray Silicone</option>
<option value="S">Aluminized Rust-Red Silicone</option>
<option value="S">Aluminized Black Silicone</option>
<option value="CB">Cool Blue Aluminized Silicone (Premium)</option>
<option value="AC">Armored Cover</option>
<option value="TF">Tigerflex™</option>
<option value="GF">Gatorflex™</option>
<option value="BV">Blue Vinyl</option>
</select>
<br>
<br>
<b>Port Size</b><br>
<select id="port" onchange="updateText('port')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="2S">1/8"</option>
<option value="4S">1/4"</option>
<option value="6S">3/8"</option>
<option value="8S">1/2"</option>
</select>
<br>
<br>
<b>Port Type</b><br>
<font size="1">Please specify type if "Custom" is selected</font><br>
<select id="porttype" onchange="updateText('porttype')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="TS">Tube Stubs</option>
<option value="JIC">JIC Swivels</option>
<option value="SF">Sanitary Flange</option>
<option value="C">Custom</option>
</select> <input type="text" id="custom" onchange="updateText('custom')" />
<br>
<br>
<b>Line Length</b><br>
<input type="text" id="line" onchange="updateText('line')" /><font size="2"> ft</font>
<script>
document.getElementById("line").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Lead Length</b><br>
<input type="text" id="lead" onchange="updateText('lead')" /><font size="2"> ft</font>
<script>
document.getElementById("lead").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Options</b>
<br>
<font size="1"> Please select all options wanted</font>
<br>
<div id="inputs">
<input type="checkbox" id="prof" class="choice" value="PR" onchange="updateText('prof')"> Profiled w/ Data</input><br>
<input type="checkbox" id="slaveboth" class="choice" value="SL" onchange="updateText('slaveboth')"> Slaved Both Ends<br>
<input type="checkbox" id="slavelead" class="choice" value="SLL" onchange="updateText('slavelead')"> Slaved Lead End<br>
<input type="checkbox" id="slavenl" class="choice" value="SLNL" onchange="updateText('slavenl')"> Slaved Non-Lead End<br>
<input type="checkbox" id="silco" class="choice" value="SN" onchange="updateText('silco')"> SilcoNert® Coating<br>
<input type="checkbox" id="dur" class="choice" value="DR" onchange="updateText('dur')"> Dursan Coating<br>
<input type="checkbox" id="ss" class="choice" value="SR" onchange="updateText('ss')"> Stainless Steel 1/16" Braided Strain Relief<br>
<input type="checkbox" id="thermo" class="choice" value="TP" onchange="updateText('thermo')"> Thermocouple Pass Through* </div><input type="text" id="thermoquant" onchange="updateText('thermoquant')" size="4" /><br>
<input type="checkbox" id="pass" class="choice" value="PP" onchange="updateText('pass')"> Power Pass Through* <br></div>
<input type="text" id="quantity" onchange="updateText('quantity')" size="4" />
<br>
<font size="1">*Specify quantity</font><br>
<br>
<hr>
<center><input type="hidden" value="" maxlength="1" size="1" id="seriesText" />
<input type="hidden" value="" maxlength="1" size="1" id="tubeText" />
<input type="hidden" value="" maxlength="1" size="1" id="sizeText" />
<input type="hidden" value="" maxlength="1" size="1" id="voltageText" />
<input type="hidden" value="" maxlength="1" size="1" id="connectorText" />
<input type="hidden" value="" maxlength="1" size="1" id="sensorText" />
<input type="hidden" value="" maxlength="1" size="1" id="placementText" />
<input type="hidden" value="" maxlength="1" size="1" id="temperatureText" />
<input type="hidden" value="" maxlength="1" size="1" id="sleeveText" />
<input type="hidden" value="" maxlength="1" size="1" id="portText" />
<input type="hidden" value="" maxlength="1" size="1" id="porttypeText" />
<input type="hidden" value="" maxlength="1" size="1" id="customText" />
<input type="hidden" value="" maxlength="1" size="1" id="lineText" />
<input type="hidden" value="" maxlength="1" size="1" id="leadText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoquantText" />
<input type="hidden" value="" maxlength="1" size="1" id="passText" />
<input type="hidden" value="" maxlength="1" size="1" id="quantityText" />
<input type="text" value="" maxlength="1" size="1" id="completeText" style="font-size:7pt; height:15px; width: 298px; border:1px solid #CC0000;" /> <br> {qluetip title=[What Next?]}<div style="width: 230px; float: left;">
<div style="width: 150px; float: left; padding-top: 5px;">
<font size="5"><font face="bebas neue"><span style="color: #d80101;">Send Us</span><span style="color: #d80101;"> an</span> email</font></font></b><br><p class="tool"> <font size="1.5"> Copy your part number and click the "Email Us" button below and we will get in contact with you:</font></p>
<a class="readmore" href="mailto:mike.seacord@neptechinc.com;rick@neptechinc.com;brian.church@neptechinc.com?Subject= (CONFIG)%20Temperature%20Controller%20Part Number"><span class="readmore-1"> <span class="readmore-2">Email Us</span></span></a> </center>
</br>
<hr>
<font face="bebas neue" size="5"><span style="color: #d80101;">Give us</span><span style="color: #d80101;"> a</span> Call</font><br><p class="tool"> <font size="1.5"> Provide your custom part number and let our dedicated sales staff help you directly by calling:</br></p><font size="2"> <b>810.225.2222</b> </font> </font>
{/qluetip}
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
var endValue;
var inputValue = document.getElementById(type).value;
document.getElementById(id).value = inputValue;
endValue = document.getElementById("seriesText").value;
if(document.getElementById("tubeText").value != ""){
endValue = endValue+"-"+document.getElementById("tubeText").value;
}
if(document.getElementById("sizeText").value != ""){
endValue = endValue+"-"+document.getElementById("sizeText").value;
}
if(document.getElementById("voltageText").value != ""){
endValue = endValue+"-"+document.getElementById("voltageText").value;
}
if(document.getElementById("connectorText").value != ""){
endValue = endValue+"-"+document.getElementById("connectorText").value;
}
if(document.getElementById("sensorText").value != ""){
endValue = endValue+"-"+document.getElementById("sensorText").value;
}
if(document.getElementById("placementText").value != ""){
endValue = endValue+"-"+document.getElementById("placementText").value;
}
if(document.getElementById("temperatureText").value != ""){
endValue = endValue+"-"+document.getElementById("temperatureText").value;
}
if(document.getElementById("sleeveText").value != ""){
endValue = endValue+"-"+document.getElementById("sleeveText").value;
}
if(document.getElementById("portText").value != ""){
endValue = endValue+"-"+document.getElementById("portText").value;
}
if(document.getElementById("porttypeText").value != ""){
endValue = endValue+"-"+document.getElementById("porttypeText").value;
}
if(document.getElementById("customText").value != ""){
endValue = endValue+"-"+document.getElementById("customText").value;
}
if(document.getElementById("lineText").value != ""){
endValue = endValue+"-"+document.getElementById("lineText").value;
}
if(document.getElementById("leadText").value != ""){
endValue = endValue+"-"+document.getElementById("leadText").value;
}
if(document.getElementById("thermoquantText").value != ""){
endValue = endValue+"-"+document.getElementById("thermoquantText").value;
}
if(document.getElementById("quantityText").value != ""){
endValue = endValue+"-"+document.getElementById("quantityText").value;
}
document.getElementById("completeText").value = endValue;
}
</script>
</body>
</div>
</div>
</div>
</div>