2017-06-03 19 views
1

選択ボックスからの値が選択されたときに関数を呼び出そうとしています。私はまた、デフォルト値を選択し、ページ上のその値のボタンが表示されます。変更方法が選択されていないのはなぜですか?

これは私の選択ボックスです:

<select id="messagingMode" class="bootstrap-select" > 
    <option value="1" selected="selected">Webhooks messaging</option> 
    <option value="2">Real time messaging</option> 
</select> 

これはJSです:

$('#messagingMode').on('change',showCorrespondingAuthorizationBtn(this)); 

と機能がちょっと選択された値を出力します。

function showCorrespondingAuthorizationBtn(select) { 
    console.log(select.val()); 
} 

何もありませんコンソールに印刷されていますが、なぜこれは機能しませんか?

答えて

2

関数を呼び出すときに参照として渡されません。また、thisはあなたがそれがその文脈であると思います。

試してみてください。

$('#messagingMode').on('change',showCorrespondingAuthorizationBtn); 

function showCorrespondingAuthorizationBtn(event) { 
    console.log($(this).val()); 
    // or 
    console.log(this.value); 
} 
0

あなたがあなたのイベントの添付ファイルのロジックにメソッドを呼び出しているので、それがトリガされていません。

// calling the invocation operator() triggers the method 
$('#messagingMode').on('change',showCorrespondingAuthorizationBtn(this)); 

これを解決するには、次のコードを試してください。

function onDropdownChanged() { 
    var sender = $(this); 
    console.log(sender.val()); 
} 

$(document).ready(function() { 
    $('#messagingMode').on("change", onDropdownChanged); 
}) 
3

jQueryのイベントの委任を使用しfunction()との直接コールfunction nameない変更機能にthisと結合.DEFAULT

$('#messagingMode').on('change',showCorrespondingAuthorizationBtn); 
 

 
function showCorrespondingAuthorizationBtn() { 
 
    console.log($(this).val()); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="messagingMode" class="bootstrap-select"> 
 
    <option value="1" selected="selected">Webhooks messaging</option> 
 
    <option value="2">Real time messaging</option> 
 
</select>

1

で試してみてください:

$('#messagingMode').on('change',function(){ 
    console.log($(this).val()); 
}); 

Hereは実用的なフィドルです。

1

$( '#1 messagingMode')の変化(関数(){

showCorrespondingAuthorizationBtn($(この).val());

})。

関連する問題