date-valを使って、セレクトボックスを連動させる

taka_oj
|
2017年10月17日
| コメントはまだありません
| JavaScript

date-valを使って、セレクトボックスを連動させる

簡単なコードで実装できます。下記がサンプルコードです。

▼JavaScript

$(function(){
var $children = $('.pref'); 
var original = $children.html(); 
 

$('.region').change(function() {
 
  
  var val1 = $(this).val();
 
 
  $children.html(original).find('option').each(function() {
    var val2 = $(this).data('val'); 
   
    if (val1 != val2) {
      $(this).not(':first-child').remove();
    }
 
  });
 
 
  if ($(this).val() == "") {
    $children.attr('disabled', 'disabled');
  } else {
    $children.removeAttr('disabled');
  }
 
});
});
});

▼CSS

▼HTML

今回、参考にさせていただいたのは、
『渋谷に住むWEBデザイナの備忘録』さんです。
ありがとうございます。

デモページは、こちら

JavaScript