Question

我无法读取jquery / javascript价格范围滑块值。我想阅读用户选择的最低价格和最高价格。我希望在用户更改其价格范围时阅读此内容。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 <script src="//code.jquery.com/jquery-1.9.1.js"></script>
 <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <script>
   $(function() {
   var minamount=0;
    var maxamount=0;
  $( "#slider-range" ).slider({
  range: true,
  min: 0,
  max: 5000,
  values: [ 0, 100 ],
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

  }
  });
   $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
  " - $" + $( "#slider-range" ).slider( "values", 1 ) );


 });

</script>

</head>
<body>
    <form name="form" method="post" action="">
<p>
   <label for="amount">Price range:</label>
 <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;"   onChange="this.form.submit()"></select>


</p>


<div id="slider-range"></div>

</form>
</body>

</html>

由于

Answer 1

我认为你的问题在这里：

  onChange="this.form.submit()"></select>
//------------------------------^^^^^^^^----this is the issue

删除</select>或进行内嵌结束onChange="this.form.submit()"/>

如果您想提交表单，请执行以下操作：

 $( "#slider-range" ).slider({
           range: true,
           min: 0,
           max: 5000,
           values: [ 0, 100 ],
           slide: function( event, ui ) {
               ....all your stuff as is....
           },
           change: function(event, ui) {  //<---add this to submit the form.
               $('[name="form"]').submit();
           }
 });

Answer 2

 slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );

      $("#amount").change();//add this line to trigger text change              
 }

---------------使用此--------------

如何使用

onChange="this.form.submit()"

添加此功能（当用户停止滑动时）

stop: function(e,ui){
    console.log($( "#amount" ).val());
  // submit the form OR call $.ajax() to show result
}

Jsp读取Price Range Slider的值

2 个答案: