<p id='tax-rate'></p>

<select id='counties'>
  <option disabled selected>Select county</option>
  <option>Los Angeles</option>
  <option>Cook</option>
  <option>Harris</option>
  <option>Maricopa</option>
  <option>San Diego</option>
</select>

#tax-rate {
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
}

select {
  padding: .25rem .5rem;
}

const countyTaxRates = {
	'los angeles': 1.00738,
	'cook': 1.007875,
	'harris': 1,
	'maricopa': 1.00738,
	'san diego': 1.00738
};

const countyOptions = document.querySelector('#counties');
const output = document.querySelector('#tax-rate');

countyOptions.addEventListener('change', (event) => {
  const county = event.target.value; // e.g. Los Angeles
  // lookup countyTaxRates by name
  const taxRate = countyTaxRates[county.toLowerCase()];
  // just for visual purposes
  output.textContent = `${county}: ${taxRate}`;
})