JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<form>

<select required="required" class="city">
<option value="">Choose Location</option>
<option value="Indore">Indore</option>
<option value="Bhopal">Bhopal</option>
<option value="Mumbai">Mumbai</option>
</select>
<br/>
<br/>

<button>
Submit
</button>

</form>

<pre> Your City is: <span></span></pre>

<img src="" class="cityimg"/>

CSS

select{
  background: red;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  -webkit-appearance: none;
}
button{
  background: blue;
  border: none;
  font-weight: bold;
  padding: 10px 20px;
  color: #fff;
  width: 50%;
  cursor: copy;
}
button:hover{
  background: black;
}
.cityimg{
  width: 300px;
}

JavaScript

$('button').click(function(e){
var cityname = $('.city').val();
e.preventDefault();
	$('pre span').text($('.city').val());
  
  if(cityname == 'Indore'){
  	$('.cityimg').attr('src', 'https://www.holidify.com/images/bgImages/INDORE.jpg');
  }
  else if(cityname == 'Mumbai'){
  	$('.cityimg').attr('src', 'https://cdn.britannica.com/26/84526-050-45452C37/Gateway-monument-India-entrance-Mumbai-Harbour-coast.jpg');
  }
  else if(cityname == 'Bhopal'){
  	$('.cityimg').attr('src', 'https://timesofindia.indiatimes.com/thumb/57204093.cms?width=423&height=281');
  }

});