HTML 配置表单选项

Question

我有一个产品 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 将相同。

Answer 1

好的，这是我建议你做的:

创建 2 个价格 slider 和 2 个价格显示。然后，当您选择的包含“SATA”和“SSD”值的值发生变化时，只需隐藏其中一个即可。

您还应该绑定(bind)两个 slider ，以便它们始终具有相同的值(移动一个也会移动另一个)。

然后，当更新更改我之前谈到的 select 的值时，您可以做的是更新表单的“action”属性值。

我认为您可以通过这种方式轻松理解并充分发挥作用。