0

我有这段代码，它使用 JQuery UI 创建一个滑块。它在滑块停止时调用一个函数（当您停止移动滑块时）并使用滑块中包含的值创建一个隐藏的表单字段（以便在提交表单后可以对其进行 POST。）

除了一个小错误外，这非常有效：

如果用户不移动滑块，stop:则永远不会触发，因此永远不会创建隐藏的表单字段。

解决此问题的最佳方法是什么？

 $(function() {
    $( "#slider8" ).slider({
     orientation: "horizontal",
     range: "min",
     min: 0,
     max: 100,
     value: 50,
     stop: function(event, ui) {
        var $s1 = $('<input/>', {type: 'hidden',id:'slider8',name:'slider8', value: ui.value});
        $s1.appendTo('.form-horizontal');
     }
  });
 });
4

1 回答 1

1

编辑：

我最初的建议是将 jQuery UI 滑块附加到范围输入类型，但 jQuery UI 不支持 - 它只附加到 div，而不是输入元素。我的错。

这是您希望实现的完整 jsFiddle 示例。您需要在 create 事件中创建隐藏元素，并在 change 事件中对其进行更新，如下所示：

HTML：

<div id="slider8ui"></div>

jQuery：

 $(function() {
    $( "#slider8ui" ).slider({
     orientation: "horizontal",
     range: "min",
     min: 0,
     max: 100,
     value: 50,
     create: function( event, ui ) {
        $('<input/>', {type: 'text',id:'slider8',name:'slider8', value: 50}).appendTo('#slider8ui');
     },
     change: function(event, ui) {
        $("#slider8").val(ui.value);
     }
  });
 });

这是完整的 jsFiddle：

http://jsfiddle.net/TdpX9/

于 2013-06-05T05:27:48.690 回答