將滑塊設置爲標準位置Javascript

我有一個滑塊和一個下拉菜單。每當有人使用下拉菜單我想滑塊設置回2014年的位置。我不知道如何在JavaScript中做到這一點。在腳本下面，我添加了我認爲它應該與該行一致的地方。有沒有人有腳本下的想法？將滑塊設置爲標準位置Javascript

<!DOCTYPE html> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
    on iOS devices--> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> 
    <title></title> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css"> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script> 

    <script> 
     query("#lplist").on("change", function(e) { 
     var value = e.currentTarget.value; 
     switch (value) { 
     case "Aantal huishoudens": 
      <SET SLIDER TO 2014> 
      break; 
     case "Aantal inwoners": 
      <SET SLIDER TO 2014> 
      break; 
     case "% Inwoners tussen 0 en 15 jaar": 
      <SET SLIDER TO 2014> 
      break; 
     case "% Inwoners tussen 15 en 25 jaar": 
      <SET SLIDER TO 2014> 
      break; 
     case "% Inwoners tussen 25 en 45 jaar": 
      <SET SLIDER TO 2014> 
      break; 
     case "% Inwoners tussen 45 en 65 jaar": 
      <SET SLIDER TO 2014> 
      break; 
     case "% Inwoners ouder dan 65 jaar": 
      <SET SLIDER TO 2014> 
      break; 
      }; 
      }); 
     }); 
     }); 

    $(function() { 
    var select = $("#Jaartal"); 
    var slider = $("<div id='slider'></div>").insertAfter(select).slider({ 
     min: 1, 
     max: 8, 
     range: "min", 
     value: select[ 0 ].selectedIndex + 1, 
     slide: function(event, ui) { 
    var index = ui.value-1; 
     select[ 0 ].selectedIndex = index; 
    if (select[0][index].text === "2014") { 
     } 
    if (select[0][index].text === "2015") { 
     } 
    if (select[0][index].text === "2016") { 
     } 
    if (select[0][index].text === "2017") { 
     } 
    if (select[0][index].text === "2018") { 
     } 
    if (select[0][index].text === "2019") { 
     } 
    if (select[0][index].text === "2020") { 
     } 
    if (select[0][index].text === "2025") { 
     } 
    } 
    }); 
    $("#Jaartal").change(function() { 
    slider.slider("value", this.selectedIndex + 1); 
    }); 
}); 
</script>

<body> 
     <div id="map"> 
     </div> 
     <form id="reservation"> 
     <div style="font-size: 16pt; font-weight:bold;"> 
      Lineair 
     </div> 
     <label for="Jaartal">Jaar</label> 
     <select name="Jaartal" id="Jaartal"> 
      <option>2014</option> 
      <option>2015</option> 
      <option>2016</option> 
      <option>2017</option> 
      <option>2018</option> 
      <option>2019</option> 
      <option>2020</option> 
      <option>2025</option> 
     </select> 
    </form> 
    <div id="lppanel" class="roundedCorners"> 
     <table> 
     <tr> 
      <td style="padding:5px;"> 
      <div style="font-size: 16pt; font-weight:bold;"> 
      Gegeven 
      </div> 
      <div style="padding:10px;"> 
       <select id="lplist"> 
       <option value="choose" selected="selected">(Selecteer een optie)</option> 
       <option value="Aantal inwoners">Aantal inwoners</option> 
       <option value="Aantal huishoudens">Aantal huishoudens</option> 
       <option value="% Inwoners tussen 0 en 15 jaar">% Inwoners tussen 0 en 15 jaar</option> 
       <option value="% Inwoners tussen 15 en 25 jaar">% Inwoners tussen 15 en 25 jaar</option> 
       <option value="% Inwoners tussen 25 en 45 jaar">% Inwoners tussen 25 en 45 jaar</option> 
       <option value="% Inwoners tussen 45 en 65 jaar">% Inwoners tussen 45 en 65 jaar</option> 
       <option value="% Inwoners ouder dan 65 jaar">% Inwoners ouder dan 65 jaar</option> 
       </select> 
      </div> 
      </td> 
     </tr> 
     </table> 
    </div> 
    </body> 
</html>

來源

2015-03-03 Zuenie

啊，你是荷蘭或比利時（我是比利時）

這是短一點，比你想象得容易。沒有開關需要那裏（除非你需要如果其他的東西？然後把它放回去）

<script> 
$(function() { 
    $("#lplist").on("change", function(e) { 
    var value = e.currentTarget.value; 
    // we don't need the value; just the index. 
    // we read the index and set that index to the silder 
    var index = $("#lplist").index(e.currentTarget) ; // looks for what position the option has within the select 
    slider.setIndex(index); 
    }); 

    var select = $("#Jaartal"); 
    var slider = $("<div id='slider'></div>").insertAfter(select).slider({ 
    min: 1, 
    max: 8, 
    range: "min", 
    value: select[ 0 ].selectedIndex + 1, 
    slide: function(event, ui) { 
     var index = ui.value-1; 
     select[0].selectedIndex = index; 
     if (select[0][index].text === "2014") { 
     } 
     if (select[0][index].text === "2015") { 
     } 
     if (select[0][index].text === "2016") { 
     } 
     if (select[0][index].text === "2017") { 
     } 
     if (select[0][index].text === "2018") { 
     } 
     if (select[0][index].text === "2019") { 
     } 
     if (select[0][index].text === "2020") { 
     } 
     if (select[0][index].text === "2025") { 
     } 
    } 
    }); 
    $("#Jaartal").change(function() { 
    slider.slider("value", this.selectedIndex + 1); 
    }); 
}); 
</script>

來源

2015-03-03 13:43:16

我需要開關的其他原因。其實我想在每次切換時都激活它。我試圖在交換機中實現你的代碼，但不幸的是它似乎不工作。我試圖讓索引成爲一個全局變量，但這也沒有成功。 – Zuenie 2015-03-04 07:54:18

O，對不起。你只需要滑塊回到2014年。沒有其他價值？我會修改劇本。 – 2015-03-04 09:34:21

不要對不起。你幫助我！非常感謝您繼續提供幫助。期待劇本，這是一個令人討厭的複雜情況。 – Zuenie 2015-03-04 09:50:01

將滑塊設置爲標準位置Javascript

回答

相關問題