Question

我有一个滑块和一个下拉菜单。每当有人使用下拉菜单时，我希望滑块设置回2014年的位置。我不知道如何在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>

Answer 1

啊，你是荷兰人还是比利时人（我比利时人）

它比您预期的更短更容易。那里不需要开关（除非你需要其他的东西？然后把它放回去）

<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>

将滑块设置为标准位置Javascript

1 个答案: