JSFiddle - React, Tailwind, and code Playground

by Shen Yang

HTML

<div class='btns'>
  <button data-dir='1'>1</button>
  <button data-dir='2'>2</button>
  <button data-dir='3'>3</button>
</div>
<br>
<br>
<select id="select_dep" class="uk-select">
  <option value="" selected disabled>-或選擇看診部別-</option>
  <option value="01">綜合內科部</option>
  <option value="02">外科部</option>
</select>
<select data-div="01" class="select_div uk-select" disabled>
  <option value="" selected disabled>-或選擇看診科別-</option>
  <option value="01-1">內科</option>
  <option value="01-2">考東錢</option>
</select>
<select data-div="02" class="select_div uk-select" disabled hidden>
  <option value="" selected disabled>-或選擇看診科別-</option>
  <option value="02-1">外科</option>
  <option value="02-2">慢出招代何三</option>
</select>

JavaScript

var activeSlide = 2;
$('.btns [data-dir="' + activeSlide + '"]').css('color', 'red');
activeSlide++;
$(".btns [data-dir=" + activeSlide + "]").css('color', 'red');

$("#select_dep").change(function() {
  $('.select_div[data-div="' + $(this).val() + '"]').css('color', 'red').removeData("disabled");
});