2016-05-04 3 views
0

スライダをハンドルと選択リストから制御したいと思います。両方を一緒にリンクする方法を理解できません。ここJSれコントロールスライダ選択リストをピックします

<div id="awesome2"><div> 
<div id = "selector"> 
    <select id = "num" onclick = "setNum();"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
    </select> 
</div> 

そして:

HTML:私はjQueryの-UIとjQuery UI Pips.jsを使用しています。ここ

は私のコードは、これまでのところです

function setNum() { 
    var num = document.getElementById("num").value; 
    //some other function to apply in here ... 
} 

var min = 1; 
var max = 5; 

$("document").ready(function() { 
    var $awesome2 = $("#awesome2").slider({ 
    max: max, 
    step: 1, 
    min: min 
    }); 
    $awesome2.slider("pips", { 
    rest: "label" 
    }).slider("float"); 
    setNum(); 
}); 

のために何らかの理由で関数setNum();がスライダーから呼び出され、選択リストがスライダーにリンクされていないと機能しません。

私は最終的に、選択リストとスライダーを使ってスライダーを制御できるようにしたいと考えています。選択リストから値を選択すると、スライダを手動で選択リストに渡した場合、スライダはこの値をピックアップし、スライダをその位置に移動します。それが意味をなさないならば。

私は何が間違っているか把握するのに4時間を費やしましたが、まだ運がありません。 ご協力いただきありがとうございます。

+0

を反映するためにスタイリングです* "何らかの理由で関数のsetNum();がスライダから呼び出されたときに機能しない" * - スライダから*をどう呼び出すのですか?それはうまくいかないという意味ですか? *作業*を行うコードはありません。あなたはそれがどのように機能すると思いますか? –

+0

あなたの返信をお寄せいただきありがとうございます.T J、api docsを詳しく調べると、このライブラリはその機能をサポートしていません... – USSR

答えて

0

のコードを使用します。

$("$awesome2") 
    .slider("option", "value", document.getElementById("num").value); 

これは、あなたがスライダーの内部値を変更することができますが、とjQueryスライダーピップは自動的に更新されます、それは、このオプション:)

http://jsfiddle.net/fqxebdye/

関連する問題