HTML配置表单选项
[英]HTML config form options
问题描述
我有一个产品滑块-http://i.imgur.com/fMuvZiD.png
HTML代码：
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/slider.js"></script>
<script src="js/rslider.js"></script>
<script src="js/popup.js"></script>
<div class="wrapper">
<form id="signup_form" method="post" name="signup_form" action="post">
<input type="hidden" name="token" value="2f8c47702b1f5eb36dad1d8f4ba66211ce0c31af">
<input type="hidden" name="configure" value="true">
<div class="vps-box">
<div class="vps-os">
<h4 class="step"><small>1</small>SSD/SATA</h4>
<select class="select-vps select-drive" id="select-drive">
<option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="47" selected>SSD</option>
<option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="48">SATA</option>
</select>
</div>
<div class="vps-location">
<h4 class="step"><small>2</small>Select a Location</h4>
<select class="select-vps select-locations" id="select-location">
<option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="49" selected>France</option>
<option style="color: blue; height: 30px; padding-top: 10px; padding-left:15px" value="50">Canada</option>
</select>
</div>
<div class="vps-sliderinfo">
<h4 class="step"><small>3</small>Configure Your Server</h4>
<div class="slider-bar">
<script type="text/javascript">
var packages = [
['1', '2', '25', '2', '€30.00', '/cart.php?a=add&pid=47'],
['2', '2', '50', '4', '€40.00', '/cart.php?a=add&pid=59'],
['3', '4', '50', '5', '€50.00', '/cart.php?a=add&pid=60'],
['4', '4', '75', '8', '€60.00', '/cart.php?a=add&pid=61'],
['6', '6', '100', '10', '€80.00', '/cart.php?a=add&pid=62'],
['8', '8', '100', '12', '€100.00', '/cart.php?a=add&pid=63']];
$("input[name='configoption5']").change(function () {
// Windows Plans
if ($(this).val() == "55") {
packages = [
['1', '2', '50', '5', '€40.00', '/cart.php?a=add&pid=53'],
['4', '2', '75', '8', '€60.00', '/cart.php?a=add&pid=64'],
['6', '4', '100', '10', '€80.00', '/cart.php?a=add&pid=65'],
['8', '4', '100', '12', '€100.00', '/cart.php?a=add&pid=66'],
['10', '6', '150', '15', '€120.00', '/cart.php?a=add&pid=67'],
['12', '6', '200', '15', '€150.00', '/cart.php?a=add&pid=68']];
} else {
packages = [
['1', '2', '25', '2', '€30.00', '/cart.php?a=add&pid=47'],
['2', '2', '50', '4', '€40.00', '/cart.php?a=add&pid=59'],
['3', '4', '50', '5', '€50.00', '/cart.php?a=add&pid=60'],
['4', '4', '75', '8', '€60.00', '/cart.php?a=add&pid=61'],
['6', '6', '100', '10', '€80.00', '/cart.php?a=add&pid=62'],
['8', '8', '100', '12', '€100.00', '/cart.php?a=add&pid=63']];
}
$(s).trigger('change');
});
function _(id) {
return document.getElementById(id);
}
</script>
<div id="pgk_full" style="background:url('images/slider-bg.png') 0px 11px no-repeat;">
<div class="rslide_r">
<div class="selectorbox">
<input class="value" id="hvalue" name="hvalue" onchange="s.setValue(parseInt(this.value))" readonly="readonly" type="hidden">
<div class="slider" id="slider1" tabindex="1">
<input class="slider-input" id="sliderinput1">
</div>
<script type="text/javascript">
var s = new Slider(_("slider1"), _("sliderinput1"));
var old_value = 0;
var new_value = 0;
var svar0 = 0;
var svar1 = 0;
var svar2 = 0;
var svar3 = 0;
var svar4 = 0;
s.onchange = function () {
new_value = s.getValue();
var pkgid = s.getValue();
document.getElementById('pkg').value = pkgid;
_('line').style.backgroundRepeat = 'no-repeat';
if ($(window).width() <= 10400){
_('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 919) + 'px 0px';
} else if ($(window).width() <= 960){
_('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 799) + 'px 0px';
} else if ($(window).width() <= 768){
_('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 668) + 'px 0px';
} else if ($(window).width() <= 640){
_('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 520) + 'px 0px';
} else {
_('line').style.backgroundPosition = (parseInt(_('handle').style.left) - 280) + 'px 0px';
}
old_value = new_value;
_('hvalue').value = new_value;
_('svar0').innerHTML = packages[new_value][0] + " GB ";
_('svar1').innerHTML = packages[new_value][1] + " Cores ";
_('svar2').innerHTML = packages[new_value][2] + " GB ";
_('svar3').innerHTML = packages[new_value][3] + " TB ";
_('svar4').innerHTML = packages[new_value][4];;
};
function toSubmit() {
var form = $('#signup_form');
var drive = document.getElementById("select-drive").value;
var location = document.getElementById("select-location").value;
if ( drive == '47' && location == '49')
{
alert("/cart.php?a=add&pid=47")
}
else if ( drive == '48' && location == '49')
{
alert("/cart.php?a=add&pid=48")
}
else if ( drive == '47' && location == '50')
{
alert("/cart.php?a=add&pid=49")
}
else if ( drive == '48' && location == '50')
{
alert("/cart.php?a=add&pid=50")
}
}
</script>
</div>
</div>
</div>
<table class="plan-names">
<tr>
<td onclick="s.setValue(0)" id="p0"></td>
<td onclick="s.setValue(1)" id="p1"></td>
<td onclick="s.setValue(2)" id="p2"></td>
<td onclick="s.setValue(3)" id="p3"></td>
<td onclick="s.setValue(4)" id="p4"></td>
<td onclick="s.setValue(5)" id="p5"></td>
</tr>
</table>
</div>
<div class="slider-specs clearafter">
<div class="main">
<div class="cloud-spec ram">
<h4>RAM</h4>
<h2 id="svar0">2 GB</h2>
</div>
<div class="cloud-spec hdd">
<h4>SSD</h4>
<h2 id="svar2">50 GB</h2>
</div>
<div class="cloud-spec cpu">
<h4>CPU</h4>
<h2 id="svar1">2 Cores</h2>
</div>
<div class="cloud-spec bw">
<h4>TRANSFER</h4>
<h2 id="svar3">4 TB</h2>
</div>
<div class="clear"></div>
<p><strong>2 Gb/s uplink on all virtual servers!</strong>
</p>
</div>
<div class="price">
<h4>YOUR TOTAL</h4>
<h1 id="svar4">€40.00</h1><span>per month</span>
<input id="pkg" name="type3_package" type="hidden" value="" />
<div class="button-wrap">
<button class="button green large" onclick="toSubmit();" type="button" id="submit-order" />Order This Plan</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
CSS代码： http ： //pastebin.com/bquuac4c （代码太长，无法在此处发布）
我不知道如何编码该选项，如果您选择SSD或SATA，将显示不同数量的磁盘空间，然后需要将它们带到另一个cart.php链接。 例如，对于屏幕快照中所示的此软件包，您可以获得50GB的SSD，但是如果他们将顶部的选项更改为SATA，那么我想提供100GB的SATA，但CPU / RAM /传输将相同。
1 个解决方案
解决方案1
0 已采纳 2015-07-18 18:46:11
好的，我建议您这样做：
创建2个价格滑块和2个价格显示。 然后，当选择的包含“ SATA”和“ SSD”值的值发生更改时，只需隐藏一个或另一个即可。
您还应该绑定两个滑块，以使它们始终具有相同的值（移动一个滑块也会移动另一个滑块）。
然后，在更新更改我之前说过的选择的值时可以做的就是更新表单的“操作”属性值。
通过这种方式，我认为您会获得一些易于理解且可以正常工作的东西。
html形式很多选项
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.