select source

Toggle class name on click in jQuery

by Mark Bolden

HTML

<select id="type">
  <option value="TV">TV</option>
  <option value="Radio">Radio</option>
</select>
<hr>
<select id="results">..results</select>

JavaScript

let types = [
  {
    "id": 1,
    "media": "TV",
    "source": "wkbw"
  },
  {
    "id": 2,
    "media": "TV",
    "source": "wffo"
  },
  {
    "id": 3,
    "media": "TV",
    "source": "wtrw"
  },
  {
    "id": 8,
    "media": "Radio",
    "source": "wrqa"
  },
  {
    "id": 9,
    "media": "Radio",
    "source": "wuqa"
  },
  {
    "id": 10,
    "media": "Radio",
    "source": "wzzt"
  }
]

$("#type").change(function() {
	$("#results").empty();
 	selected = $("#type").val();
  
  for (var i = 0; i < types.length; i++) {
  	// filter source by selected
    //$("#results").append("<option value='" + types[i].source + "'>" + types[i].source + "</option>");
    source = types.filter(types => types.media === selected).map(d => d.source).join('');
    $("#results").append("<option value='" + source + "'>" + source + "</option>");
  }
});