使用javascript从html选择菜单更改dojo滑块的最小值

Question

我想使用html选择菜单更改dojo滑块的最小值。 我尝试使用onchange函数，但遇到了一些问题。 这是我的起始代码。

 require(["dojox/form/HorizontalRangeSlider", "dojo/dom", "dojo/domReady!"], function(HorizontalRangeSlider, dojoDom){ var rangeSlider = new HorizontalRangeSlider({ name: "rangeSlider", value: [2,6], minimum: -10, maximum: 10, intermediateChanges: true, style: "width:300px;", onChange: function(value){ dojoDom.byId("sliderValueMin").value = value[0]; dojoDom.byId("sliderValueMax").value = value[1]; } }, "rangeSlider"); }); 

 <html> <head> <link href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" rel="stylesheet"/> <link href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojox/form/resources/RangeSlider.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script> </head> <body> <select id="zoneQuake" name="zoneQuake"> <option value="1" id="one" name="one">One</span></option> <option value="2" id="two" name="two">Two</span></option> </select> <div class="claro"> <div id="rangeSlider"></div> <p><input type="text" id="sliderValueMin" /></p> <p><input type="text" id="sliderValueMax" /></p> </div> </body> </html> 

Answer 1

您尝试更新滑块值的代码在哪里？ 也有不需要的“”标签。

这是您的操作方法。

 require(["dojox/form/HorizontalRangeSlider", "dojo/dom", "dojo/on", "dijit/registry", "dijit/form/Select", "dojo/domReady!"], function(HorizontalRangeSlider, dojoDom, on, registry){ var zoneQuakeNode = dojoDom.byId("zoneQuake"); on(zoneQuakeNode, "change", function(evt){ var max = rangeSlider.value[1]; rangeSlider.set("value", [evt.target.value, max]); }); var rangeSlider = new HorizontalRangeSlider({ name: "rangeSlider", value: [2,6], minimum: -10, maximum: 10, intermediateChanges: true, style: "width:300px;", onChange: function(value){ dojoDom.byId("sliderValueMin").value = value[0]; dojoDom.byId("sliderValueMax").value = value[1]; } }, "rangeSlider"); }); 

 <html> <head> <link href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" rel="stylesheet"/> <link href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojox/form/resources/RangeSlider.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script> </head> <body> <select id="zoneQuake" name="zoneQuake" > <option value="1" id="one" name="one">One</option> <option value="2" id="two" name="two">Two</option> </select> <div class="claro"> <div id="rangeSlider"></div> <p><input type="text" id="sliderValueMin" /></p> <p><input type="text" id="sliderValueMax" /></p> </div> </body> </html>