2017-08-01 39 views
1

こんにちは、私は売り上げアイテムのページにいくつかの選択タグを持っています。ユーザーがボタンをクリックして、このselectタグselect2でイベントをトリガーする方法

$(document).ready(function(){ 
$("#code0").select2(); 
}) 


function append(){ 
    $("table").append("<tr><td><select id='code1' onclick='getvalue(this)'><option>1</option></select></td></tr>"); 
    $("#code1").select2(); 
} 

にSELECT2を適用

<select id='code0' onclick='getvalue(this)'><option>1</option></select> 

document.readyイムでより多くを追加するときにjqueryのアペンドによって作成されたHTMLや他の人が作成した最初のものは、次の選択追加のIDを持っていますコード2の

これで、select2を適用する前にgetvalue()関数が正常に機能していましたが、select2を適用した後でselectがクリックやイベントをトリガーしていません。選択2を適用した後、どのようにイベントをトリガーできますか?

function getvalue(item){ 
    alert("event triggered"); // to check that jquery called this function or not 
    console.log(item.value); 
} 

get value functionを呼び出していません。

あなたが選択し、既存のSELECT2をリンクしたら、ページのロードが、私は、コンソール

jQuery-2.1.4.min.js:2 Uncaught TypeError: Cannot read property 'call' of null 
    at Function.each (jQuery-2.1.4.min.js:2) 
    at MutationObserver.<anonymous> (select2.min.js:2) 
+0

は、あなたが問題を表示するためにhttps://jsfiddle.net/を使用することができます参照してください。 –

+0

ユーザがドロップダウンから選択した場合、選択した値が必要です。ではない? –

+0

はい私はユーザーがそれを選択したときにその値を選択したいと思います。 $( "code0").val()関数のように.val()で値を取得することはできますが、そのイベントをトリガしないためにはできません – Azeem112

答えて

0

でこのエラーを見ることができますいつでも。

select2 overrideすべてのオプションに対してリスト(li)を選択して作成し、選択を非表示にします。

selectに追加されたイベントは直接動作しません。

Selectセレクトプラグインは、あなたの必要性

コード上で複数のSELECT2用のプラグイン

var select2Ele = $("#code0").select2(); 

select2Ele.on("select2:select", function (event) { 
    // after option is selected 
}); 

select2Ele.on("select2:selecting", function (event) { 
    // before selection 
}); 

によって与えられたvarと使用方法は次のように動作するよう割り当てがELEをSELECT2サーバに使用できる機能を提供します。 logメソッドでは、現在の要素の値を取得するために使用できるイベントや他のstuffs

$eventSelect.on("change", function (e) { log("change"); }); 

function log (name, evt) { 
    if (!evt) { 
    var args = "{}"; 
    } else { 
    var args = JSON.stringify(evt.params, function (key, value) { 
     if (value && value.nodeName) return "[DOM node]"; 
     if (value instanceof $.Event) return "[$.Event]"; 
     return value; 
    }); 
    } 
    var $e = $("<li>" + name + " -> " + args + "</li>"); 
    $eventLog.append($e); 
    $e.animate({ opacity: 1 }, 10000, 'linear', function() { 
    $e.animate({ opacity: 0 }, 2000, 'linear', function() { 
     $e.remove(); 
    }); 
    }); 
} 

を持ってselect2 doc

+0

複数の選択リスト項目があります。今すぐ私は$( "。select")を使用しています。select2()を使ってselect2をすべて適用します – Azeem112

+0

私は自分の答えを変更しました – Ashish451

関連する問題