<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.2.6/jquery.inputmask.bundle.min.js"></script> <div style="margin:10px;"> <label for="exchange">Choose a currency:</label> <select name="exchange" id="exchange" class="form-control"> <option selected disabled>Choose</option> <option value="1">USD</option> <option value="2">Euro</option> <option value="3">Pound</option> <option value="4">TL</option> </select> </div> <div style="margin:10px;"> <label>Price:</label> <input type="text" class="form-control text-left monerate" id="price1" name="price1" placeholder="₺ 0.00" data-inputmask="'alias': 'numeric', 'groupSeparator': ',', 'autoGroup': true, 'digits': 2, 'digitsOptional': false, 'placeholder': '0'" /> </div> </div>

input.monerate { text-align: left !important; width: 300px; } select { width: 300px !important; }

//by default on page load $("#price1").inputmask({ alias: "currency", prefix: '₺ ' }); //apply prefix on select option change $(document).on('change', '#exchange', function() { var exchangeID = +$(this).val(); //parse as number not - by default is string if (exchangeID == 1) { $("#price1").inputmask({ alias: "currency", prefix: '$ ' }); } else if (exchangeID == 2) { $("#price1").inputmask({ alias: "currency", prefix: '€ ' }); } else if (exchangeID == 3) { $("#price1").inputmask({ alias: "currency", prefix: '£ ' }); } else if (exchangeID == 4) { $("#price1").inputmask({ alias: "currency", prefix: '₺ ' }); } });