JSFiddle - React, Tailwind, and code Playground

HTML

<select id="type" name="type">
	<option selected>Post</option>
	<option>Videos</option>
	<option>Picture</option>
</select>

<select id="category" name="category">
	<option selected>Music</option>
	<option>Medicine</option>
	<option>Others</option>
</select>

<select id="position" name="position">
	<option selected>Top</option>
	<option>Bottom</option>
	<option>Left</option>
	<option>Right</option>
</select>

<select id="day" name="day">
	<option selected>Today</option>
	<option>Tomorrow</option>
	<option>Yesterday</option>
</select>

JavaScript

var url = "url.com/explorer/videos/medicine/top/yesterday/";
//url.replace(/\/$/, "") will remove the last occurance of '/' if exists
var options = url.replace(/\/$/, "").split('/').slice(2);

$(options).each(function (ind, data) {
	if (data != null) {
		switch (ind) {
			
			case 0:
				$("#type option").filter(function () {
					//may want to use $.trim in here
					return $(this).text().toLowerCase() == data.toLowerCase();
				}).prop('selected', true);
				break;
			case 1:
				$("#category option").filter(function () {
					return $(this).text().toLowerCase() == data.toLowerCase();
				}).prop('selected', true);
				break;
			case 2:
				$("#position option").filter(function () {
					return $(this).text().toLowerCase() == data.toLowerCase();
				}).prop('selected', true);
				break;
			case 3:
				$("#day option").filter(function () {
					return $(this).text().toLowerCase() == data.toLowerCase();
				}).prop('selected', true);
				break;
			default:
				break;
		}
	}
});