0

JQuery UI を使用してスライダーを作成するこのコードがあります。スライダーが停止したとき（スライダーの移動を停止したとき）に関数を呼び出し、スライダーに含まれる値で非表示のフォームフィールドを作成します（フォームが送信されるとPOSTできるようにします）。

これは、1 つのマイナーなバグを除いて完全に機能します。

ユーザーがスライダーを動かさない場合は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 に答える