JokerCatz/20160120_VUE Secret

## 20160120_VUE
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>

<div>
  jQuery<select id="j_bank"></select> <select id="j_branch"></select>
</div>

<div>
  VUE
  <select id="v_bank" v-model="bank" v-on:change="changeBank">
    <option value="">請選擇</option>
    <option v-for="b in bank_list" track-by="i" v-bind:value="b.i">
      {{('' + b.i).rjust(3 , '0')}} {{b.n}}
    </option>
  </select>
  <select id="v_branch" v-model="branch">
    <option value="">請選擇</option>
    <option v-for="b in branch_list" track-by="i" v-bind:value="b.i">
      {{('' + b.i).rjust(4 , '0')}} {{b.c}} {{b.n}}
    </option>
  </select>
</div>

<ol v-model="branch">
  <li v-for="b in branch_list" track-by="i">
    <h4>{{b.n}}</h4>
    <div><span>{{b.c}}</span> : {{('' + b.i).rjust(4 , '0')}}</div>
  </li>
</ol>

    <script src="/jquery.js"></script>
    <script src="/vue.js"></script>
    <script>
String.prototype.rjust = function( width, padding ) {
  padding = padding || " ";
  padding = padding.substr( 0, 1 );
  if( this.length < width )
    return padding.repeat( width - this.length ) + this;
  else
    return this;
}
var vm = null;

jQuery(function($){

vm = new Vue({
  el: 'body',
  methods: {
    changeBank:function(){
      if(('' + this.bank).length > 0){
        $.getJSON('/json/bank_' + this.bank + '.json' , function(json){
          vm.$set('branch_list' , json);
        });
      }
    }
  },
  data: {
    bank:null,
    branch:null,
    bank_list:[],
    branch_list:[]
  }
});
$.getJSON('/json/bank.json' , function(json){
  vm.$set('bank_list' , json);
});


///////////JQUERY
  $.getJSON('/json/bank.json' , function(json){
    $('#j_bank').append('<option value="">請選擇</option>')
    for(var i = 0 ; i < json.length ; i++){
      $('#j_bank').append('<option value="' + json[i].i + '">' + ('' + json[i].i).rjust(3 , '0') + ' ' + json[i].n + '</option>')
    }
    $('#j_bank').change(function(){
      $('#j_branch').html('<option value="">請選擇</option>');
      if($(this).val().length > 0){
        $.getJSON('/json/bank_' + $(this).val() + '.json' , function(json){
          for(var i = 0 ; i < json.length ; i++){
            $('#j_branch').append('<option value="' + json[i].i + '">' + ('' + json[i].i).rjust(4 , '0') +  ' ' + json[i].c + ' ' + json[i].n + '</option>')
          }
        })
      }
    });
    $('#j_bank').change();
  })
//////////////////JQUERY
});
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>

	<div>
	jQuery<select id="j_bank"></select> <select id="j_branch"></select>
	</div>

	<div>
	VUE
	<select id="v_bank" v-model="bank" v-on:change="changeBank">
	<option value="">請選擇</option>
	<option v-for="b in bank_list" track-by="i" v-bind:value="b.i">
	{{('' + b.i).rjust(3 , '0')}} {{b.n}}
	</option>
	</select>
	<select id="v_branch" v-model="branch">
	<option value="">請選擇</option>
	<option v-for="b in branch_list" track-by="i" v-bind:value="b.i">
	{{('' + b.i).rjust(4 , '0')}} {{b.c}} {{b.n}}
	</option>
	</select>
	</div>

	<ol v-model="branch">
	<li v-for="b in branch_list" track-by="i">
	<h4>{{b.n}}</h4>
	<div><span>{{b.c}}</span> : {{('' + b.i).rjust(4 , '0')}}</div>
	</li>
	</ol>

	<script src="/jquery.js"></script>
	<script src="/vue.js"></script>
	<script>
	String.prototype.rjust = function( width, padding ) {
	padding = padding \|\| " ";
	padding = padding.substr( 0, 1 );
	if( this.length < width )
	return padding.repeat( width - this.length ) + this;
	else
	return this;
	}
	var vm = null;

	jQuery(function($){

	vm = new Vue({
	el: 'body',
	methods: {
	changeBank:function(){
	if(('' + this.bank).length > 0){
	$.getJSON('/json/bank_' + this.bank + '.json' , function(json){
	vm.$set('branch_list' , json);
	});
	}
	}
	},
	data: {
	bank:null,
	branch:null,
	bank_list:[],
	branch_list:[]
	}
	});
	$.getJSON('/json/bank.json' , function(json){
	vm.$set('bank_list' , json);
	});










	///////////JQUERY
	$.getJSON('/json/bank.json' , function(json){
	$('#j_bank').append('<option value="">請選擇</option>')
	for(var i = 0 ; i < json.length ; i++){
	$('#j_bank').append('<option value="' + json[i].i + '">' + ('' + json[i].i).rjust(3 , '0') + ' ' + json[i].n + '</option>')
	}
	$('#j_bank').change(function(){
	$('#j_branch').html('<option value="">請選擇</option>');
	if($(this).val().length > 0){
	$.getJSON('/json/bank_' + $(this).val() + '.json' , function(json){
	for(var i = 0 ; i < json.length ; i++){
	$('#j_branch').append('<option value="' + json[i].i + '">' + ('' + json[i].i).rjust(4 , '0') + ' ' + json[i].c + ' ' + json[i].n + '</option>')
	}
	})
	}
	});
	$('#j_bank').change();
	})
	//////////////////JQUERY
	});
	</script>
	</body>
	</html>