JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="//angularlight.org/bin/alight_0.12.last.min.js"></script>
<div al-app="app">
  <select al-value="doctor">
      <option selected value="">Все специальности</option>
      <option value="pediatric">Детский стамотолог</option>
      <option value="surgeon">Хирург</option>
  </select>

  <select al-value="city">
      <option selected value="">Все</option>
      <option value="moscow">Moscow</option>
      <option value="piter">Piter</option>
      <option value="new-york">New-York</option>
  </select>

  <div :hidden="!show('pediatric', 'moscow')">Дантист 1</div>
  <div :hidden="!show('pediatric', 'piter')">Дантист 2</div>
  <div :hidden="!show('surgeon', 'piter')">Хирург 1</div>
  <div :hidden="!show('surgeon', 'moscow')">Хирург 2</div>
  <div :hidden="!show('pediatric', 'new-york')">Дантист 3</div>
  
  <hr/>
  Doctor: {{doctor}} <br/> City: {{city}}
</div>

JavaScript

function app(scope) {
	scope.show = function(kind, city) {
  	if(scope.city && scope.city != city) return false;
    if(scope.doctor && scope.doctor != kind) return false;
    return true;
  }
}