JSFiddle - React, Tailwind, and code Playground

by lega911

HTML

<script src="http://angularlight.org/bin/alight_0.13.last.min.js"></script>
<div id="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

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

alight('#app', app);