select source

Toggle class name on click in jQuery

by alwayshelping

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").html('')
 	var selected = $("#type").val();
  var source = types.filter(types => types.media === selected).map(d => d.source);
  for (var i = 0; i < source.length; i++) {
   $("#results").append("<option value='" + source[i] + "'>" + source[i] + "</option>");
  }

});