JQuery-UI Slider - 将数值存储到MySQL但向用户显示字符串值

时间:2013-01-04 20:15:02

标签: jquery mysql jquery-ui slider jquery-ui-slider

我正在使用jquery-ui滑块来创建从强烈不同意到强烈同意的连续比例(样本 - http://enscholar.com/slider/)。我创建了一个对象来保存我想要显示的不同字符串值,但我想将数值存储到数据库中 - 而不是字符串。

这是我到目前为止所做的:

var p = {
            0: "Strongly Disagree",
    5: "Strongly Disagree",
    10: "Strongly Disagree",
    15: "Strongly Disagree",
    20: "Strongly Disagree",
            25: "Disagree",
    30: "Disagree",
    35: "Disagree",
    40: "Disagree",
    45: "Neutral",
            50: "Neutral",
    55: "Neutral",
    60: "Neutral",
            65: "Agree",
    70: "Agree",
    75: "Agree",
    80: "Agree",
            85: "Strongly Agree",
    90: "Strongly Agree",
    95: "Strongly Agree",
    100: "Strongly Agree"
         };

        $( ".slider" ).slider({
            animate:true,
            range: "min",
            value:50,
            min: 0,
            max: 100,
            step: 5,
            slide: function( event, ui ) {
                $( "#slider-result" ).val(p[ui.value]);
            }
        });
        $("#slider-result").val(p[$(".slider").slider("value")]);

        $( ".slider-2" ).slider({
            animate:true,
            range: "min",
            value:50,
            min: 0,
            max: 100,
            step: 5,
            slide: function( event, ui ) {
                $( "#slider-result-2" ).val(p[ui.value]);
            }
        });
        $("#slider-result-2").val(p[$(".slider-2").slider("value")]);
    });

从那里我只是在输入中收集价值 - 我感觉这是问题,但我不知道从这里去哪里。

<input type="text" id="slider-result" name="career" readonly/>

有关如何向用户显示字符串,但将数值存储到数据库的任何想法?

非常感谢任何帮助!!

1 个答案:

答案 0 :(得分:0)

根据输入滑块的值,我使用if语句将范围链接到特定的#message:

$(function() {
            $( ".slider" ).slider({
                animate:true,
                range: "min",
                value:0,
                min: 0,
                max: 100,
                step: 1,
                slide: function( event, ui ) {
                $( "#slider-result" ).val(ui.value);
                    if (ui.value >= 0 && ui.value < 20) {
                        $("#message").text("I could care less.");
                    } else if (ui.value >= 20 && ui.value < 40) {
                        $("#message").text("Loving what you do is overrated...");
                    } else if (ui.value >= 40 && ui.value < 60) {
                        $("#message").text("I guess it might be...");
                    } else if (ui.value >= 60 && ui.value < 80) {
                        $("#message").text("I want to love what I do.");
                    } else {
                        $("#message").text("I NEED to love my career!");
                    }
                }
            });

然后在显示滑块时,您可以调用id =“message”来显示字符串:

<div id="sliders">
      <form method="post" action="results.php">
          How important is it that you find a career that you love and are good at?
          <input type="hidden" id="slider-result" name="career" readonly/>
          <div class="slider"></div>
          <p id="message"><img src="images/slide.png" /></p>
       </form>
 </div>