以编程方式根据值更新jQuery滑块的位置

时间:2015-11-26 07:47:25

标签: javascript jquery html

我在我的网站中添加了一个jQuery滑块。第一次登录客户从滑块测量值时,滑块值存储在数据库中,下次登录时,我想显示根据存储在数据库中的登录客户的值选择的滑块值。

我更新了滑块的值,但根据滑块的选定值,问题是位置不正确。

请参阅以下代码:

 $customer = Mage::getSingleton('customer/session')->getCustomer();
    if($customer->getId())
    {    

     $measurement_data = Mage::getModel("measurement/measurement")->getCollection()->addFieldToFilter('customerid',$customer->getId())->getFirstItem();       
       $measurement_trouserwaist = $measurement_data->getTrouserWaist();

    }
    jQuery(function() {
        var select2 = jQuery( "#minbeds2" );
         var slider_set2 = jQuery( ".slider_set2" );

        var slider = jQuery( "<div style='' id='slider3'></div>" ).insertAfter(slider_set2 ).slider({
          min: 1,
          max: 8,
          range: "min",
         // value: select2[ 0 ].selectedIndex + 1,
          value: select2[ 0 ].selectedIndex + <?php echo ($measurement_trouserwaist)?$measurement_trouserwaist:'1';?>,
          slide: function( event, ui ) {


            jQuery("#minbeds3")[0].selectedIndex = ui.value - 1;
            //select[ 0 ].selectedIndex = ui.value - 1;
            jQuery('.value6').html(ui.value + 29);
            jQuery("#f").css("display", "block");
             jQuery("#measure_waist").val(ui.value + 29 + "inch");
          }
        });

        //jQuery( ".ui-slider-handle" ).html(jQuery( ".select" ).html());
        min=30;
        max= 37;

            var array = [];

        for (var i = min; i <= max; i++) {
            array.push(i);
        }

            //Create and append select list
            var selectList2 = document.createElement("select");
            selectList2.setAttribute("id", "minbeds3");
            selectList2.setAttribute("name", "minbeds3");
            selectList2.setAttribute("class", "minbeds3");
            //document.getElementsByClassName("ui-slider-handle").appendChild(selectList);
            jQuery( "#slider3 .ui-slider-handle" ).html(selectList2);
            //Create and append the options
            for (var i = 0; i < array.length; i++) {
                var option2 = document.createElement("option");
                option2.setAttribute("value", array[i]);
         if(array[i]=='<?php echo ($measurement_trouserwaist)?$measurement_trouserwaist:'1';?>'){
                    option2.setAttribute("selected", 'selected'); 

                    }  
                option2.text = array[i];
                selectList2.appendChild(option2);
                  document.getElementById("minbeds3").appendChild(option2);

            }

         jQuery( "#minbeds3" ).change(function() {
          slider.slider( "value", this.selectedIndex + 1 );
          jQuery('.value6').html(this.selectedIndex + 30);
          jQuery("#f").css("display", "block"); 
          jQuery("#measure_waist").val(this.selectedIndex + 30 + "inch");
        });

      });

如何根据值更新位置,虽然我从数据库获得了更新的值但是根据值位置没有更新。

1 个答案:

答案 0 :(得分:0)

您需要使用像PHP这样的服务器端编程语言从数据库中获取值。然后在页面上返回该值,并使用AJAX获取它。

例如:

fetch.php

<?php
    $query = "SELECT value FROM table WHERE userid = " . $_GET['userid'];
    $run = mysql_query($query) or die(mysql_error());
    $fetch = mysql_fetch_assoc($run);

    echo $fetch['userid'];
?>

的jQuery

$.get("fetch.php?userid=" + userid, function(data){
    $("#slider").slider("value", data);
});

这将有效,将#slider替换为您自己的滑块,查询您自己的查询和变量userid,但您希望在WHERE部分中使用。