2016-08-04 16 views
1

私は関数内で変数に値を代入していますが、この変数の外にこの値を取得したいのですが、未定義です。以下は自分のコードです。私は自分のページでselect2を持っていますが、私はいくつかのデータを設定したいのですが、ユーザーがラジオボタンを選択できるようにして、選択ボタンに表示するデータを決定するラジオボタンの値を取得します。今私のコーディングの後、私はonclickイベント関数内var size_dataを警告することができますが、私はそれを必要とSELECT2にこの値を得ることができませんでした、この上の任意のヘルプはvar size_dataは、グローバル変数と変数である関数外で変数値を取得する方法

注理解されるであろうそれは、異なるサイズでもDEMO ON FIDDLE

var uk_size = [{ id: '8', text: '8' }, 
       { id: '10', text: '10' }, 
       { id: '12', text: '12' }, 
      ]; 
var us_size = [{ id: '4', text: '4' }, 
       { id: '6', text: '6' }, 
       { id: '8', text: '8' }, 
       { id: '10', text: '10' }, 
      ]; 
var eu_size = [{ id: '34', text: '34' }, 
       { id: '36', text: '36' }, 
       { id: '38', text: '38' }, 
      ]; 
var ng_size = [{ id: 'XS', text: 'XS' }, 
       { id: 'S', text: 'S' }, 
       { id: 'M', text: 'M' }, 
      ]; 
var size_data = ng_size; //default value; 
//alert(ng_size); 
    $("#size-style input:radio").on('click',function() { 
       //alert(ng_size); 

        var size_style =""; 
       size_style = $(this).val(); 
       if (size_style === "ng-size"){ 
         size_data = ng_size; 
       }else if(size_style === "uk-size"){ 
         size_data = uk_size; 
       }else if(size_style === "us-size"){ 
         size_data = us_size; 
       }else{ 
        size_data = eu_size; 
       } 
       alert(size_data);//can alert jquery object here 
    }); 



$('select.size-select').select2({ 
     name: 'size', 
     value: 'S', 
     data: size_data, 
     tags: "true", 
     placeholder: "Select size", 
     allowClear: true 
    }); 

答えて

0

あなたはあなたができるラジオボタンのクリックイベントに最初にして、デフォルト値を持つselect2を初期化することができ、私の見

変数グローバルで保持しています以下のようにそのデータを変更します。

https://fiddle.jshell.net/nnaL44ur/4/

$("#size-style input:radio").on('click', function() { 
    //alert(ng_size); 

    var size_style = ""; 
    size_style = $(this).val(); 
    if (size_style === "ng-size") { 
    size_data = ng_size; 
    } else if (size_style === "uk-size") { 
    size_data = uk_size; 
    } else if (size_style === "us-size") { 
    size_data = us_size; 
    } else { 
    size_data = eu_size; 
    } 
    alert(size_data); //can alert jquery object here 

    var $select = $('select.size-select'); //grabbing the select element 

    //fetching the previously set options at the first time initialization of select2 widget 
    var options = $select.data('select2').options.options; 

    $select.html(''); //clearing the previous dropdown options 
    // add new items to the options 
    options.data = size_data; 
    $select.select2(options); //updating the select2 widget with newer set of option data 

}); 

は、それはあなたを助けることを願っています。

+0

私は言ったが、それはクリックイベントが発生した後にデータを更新していないように見えるし、ここでは私が作成したフィドルですhttps://fiddle.jshell.net/sammyzeal/nnaL44ur/3/ – sam

+0

@サムこの更新されたアプローチを見てください。 – vijayP

+0

これは本当にうまくいきました。ありがとうございました。コードの後半部分は理解できませんが、時間をかけて助けてください。私が私に説明することができれば嬉しいよ。ありがとうございます。 – sam

関連する問題