JSFiddle - React, Tailwind, and code Playground

by clauswilke

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Editable Dropdown Menu</title>
	<style>
		.container {
			margin: 50px auto;
			text-align: center;
		}
		select {
			padding: 10px;
			font-size: 16px;
			border-radius: 5px;
			border: 1px solid #ccc;
			min-width: 200px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		input[type=text] {
			padding: 10px;
			font-size: 16px;
			border-radius: 5px;
			border: 1px solid #ccc;
			min-width: 200px;
			margin-right: 10px;
			margin-bottom: 10px;
		}
		button {
			padding: 10px;
			font-size: 16px;
			border-radius: 5px;
			background-color: #4CAF50;
			color: #fff;
			border: none;
			cursor: pointer;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body>
	<div class="container">
		<h1>Editable Dropdown Menu</h1>
		<select id="menu">
			<option value="">Select an option</option>
			<option value="Option 1">Option 1</option>
			<option value="Option 2">Option 2</option>
			<option value="Option 3">Option 3</option>
		</select>
		<input type="text" id="newOption" placeholder="New Option">
		<button onclick="addOption()">Add Option</button>
		<button onclick="deleteOption()">Delete Option</button>
	</div>
	<script src="script.js"></script>
</body>
</html>

JavaScript

function addOption() {
  var x = document.getElementById("menu");
  var option = document.createElement("option");
  option.text = document.getElementById("newOption").value;
  x.add(option);
  document.getElementById("newOption").value = "";
}

function deleteOption() {
  var x = document.getElementById("menu");
  x.remove(x.selectedIndex);
}