我有一个产品 slider - 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/Transfer 将相同。
最佳答案
好的，这是我建议你做的:
创建 2 个价格 slider 和 2 个价格显示。 然后，当您选择的包含“SATA”和“SSD”值的值发生变化时，只需隐藏其中一个即可。
您还应该绑定(bind)两个 slider ，以便它们始终具有相同的值(移动一个也会移动另一个)。
然后，当更新更改我之前谈到的 select 的值时，您可以做的是更新表单的“action”属性值。
我认为您可以通过这种方式轻松理解并充分发挥作用。
关于HTML 配置表单选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31492598/