将滑块自动设置为默认开始值

时间:2015-03-09 16:07:19

标签: javascript slider default

我希望能够为滑块创建默认值。在我的下面,我尽可能地简化了我的代码。我希望能够调整滑块的起始位置。在下面的示例中,我希望看到我的滑块从2007年开始而不是2006年的标准。我从示例中获得了滑块。使用$符号对我来说是新的。有人知道怎么做吗?

<script>
    var map;
    var wmsLayer;
    var URL;
    var legend;
    var index;
    require(["dojo/query", "esri/map", "esri/layers/WMSLayer", "esri/dijit/Legend", "esri/config", "dojo/domReady!"],
      function (query, Map, WMSLayer, Legend, esriConfig) {

          esriConfig.defaults.io.proxyUrl = "/proxy/proxy_gcx.php";

          map = new Map("map", {
              basemap: "topo",
              center: [5.5, 52.485],
              minZoom: 8,
              maxZoom: 13,
              zoom: 8,
              slider: true
          });

          map.on("load", function () {
              query("#lplist").on("change", function (e) {
                  var value = e.currentTarget.value;
                  switch (value) {
                      case "Option 1":
                          <SET SLIDER TO DEFAULT 2007>
                          break;
                      case "Option 2":
                          <SET SLIDER TO DEFAULT 2007>
                          break;
                  };
              });
          });
      });

    $(function slider() {
        var select = $("#Jaartal");
        var slider = $("<div id='slider'></div>").insertAfter(select).slider({
            min: 1,
            max: 2,
            range: "min",
            value: select[0].selectedIndex + 2,
            slide: function (event, ui) {
                index = ui.value - 1;
                select[0].selectedIndex = index;
                if (select[0][index].text === "2006") {
                }
                if (select[0][index].text === "2007") {
                }
            }
        });
        $("#Jaartal").change(function () {
            slider.slide("value", this.selectedIndex + 1);
        });
    });

</script>
</head>

<body>
<form id="reservation">
    <div style="font-size: 16pt; font-weight:bold;">
        Lineair
    </div>
    <label for="Jaartal">Jaar</label>
    <select name="Jaartal" id="Jaartal">
        <option>2006</option>
        <option>2007</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="Option 1">Option 1</option>
                        <option value="Option 2">Option 2</option>
                    </select>
                </div>
            </td>
        </tr>
    </table>
</div>

1 个答案:

答案 0 :(得分:1)

看起来您是根据选择框的selectedIndex派生值。

最聪明的解决方案是将选择框默认设置为您想要的值:

    <select name="Jaartal" id="Jaartal">
        <option>2006</option>
        <option selected>2007</option>
    </select>