JSFiddle - React, Tailwind, and code Playground

by Aashish Handa

HTML

<html>
  <head>
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" />
  </head>
  <body>
    <div style="padding-top: 50px;"></div>
    <div class="container">
      <div class="row">
        <div class="col-xs-6">
          <select id="myDropdown" class="form-control">
			      <option value="">Select Month</option>
				    <option value="100">January</option>
				    <option value="150">February</option>
				    <option value="100">March</option>
            <option value="150">April</option>
            <option value="100">May</option>
            <option value="150">June</option>
            <option value="100">July</option>
            <option value="150">August</option>
            <option value="100">September</option>
            <option value="150">October</option>
            <option value="100">November</option>
            <option value="150">December</option>
			    </select>
        </div>
        <div class="col-xs-6">
          <input id="txtBox" type="text" readonly='1' class="form-control">
        </div>
      </div>
    </div>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  </body>
</html>

JavaScript

$("#myDropdown").change(function () {
	var selectedValue = $(this).val();
	$("#txtBox").val($(this).find("option:selected").attr("value"))
});