ionRangeSlider - 获取隐藏表单输入字段的范围值

时间:2016-05-21 12:04:16

标签: jquery forms range hidden-field

如何使用jquery在隐藏的输入字段中显示范围值 范围代码

$("#range").ionRangeSlider({
  grid: true,
  from: 1,
  to: 6,
  values: [
    "", "Tenth",
    "Diploma", "Twelth", "Graduate",
    "PostGraduate", "P.hd"
  ]
});
<input type="range" id="range" value="" name="range" />

显示隐藏的输入

<input type="hidden" id="f4" />

1 个答案:

答案 0 :(得分:0)

您需要使用onChange事件,并且我假设您要将值设置为您需要使用"Tenth","Diploma","Twelth", "Graduate","PostGraduate","P.hd"的文本值(data.from_value): -

$("#range").ionRangeSlider({
  grid: true,
  from: 1,
  to: 6,
  values: [
    "", "Tenth",
    "Diploma", "Twelth", "Graduate",
    "PostGraduate", "P.hd"
  ],
  onChange: function(data) {
    alert(data.from_value);

    $('#f4').val(data.from_value);
  }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinFlat.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.min.js"></script>

<input type="range" id="range" value="" name="range" />

<input type="hidden" id="f4" />