Yashika Yashika - 6 months ago 22
jQuery Question

How to append one value from drop-down list to the end of input box

How to append one value from drop-down list to the end of input box ?
Hereby am enclosing my Code. I want to append the currency symbol[Whichever is selected in the drop down list ] at the end of Revenue Input box.

<html>
<head>
<meta charset="UTF-8">
<title> Stack query</title>
<style>

table{
border: 1px solid black;
height:20%;
width:20%;
margin: 5%;
}
table tr td label, table tr td input,table tr td select {
width:100%;
}

</style>
</head>
<body>
<div>
<table>
<tr>
<td><label for="Currency">Currency</label></td>
<td>
<select name="currency" id="currency">
<option value="Select" selected disabled="disabled">Select Currency</option>
<option value="Dollar">$ USD</option>
<option value="Pound">£ GBP</option>
<option value="Euro">€ EUR</option>
<option value="Yen">¥ YEN</option>
</select>
</td>
</tr>
<tr>
<td><label for="Revenue">Revenue</label></td>
<td><input id="Revenue" type="text" required></td>
</tr>
</table>
</div>
</body>
</html>

T J T J
Answer

You can use a <span> tag to display the currency symbol as shown below:

$('#currency').on('change', function() {
  $('#symbol').text(this.options[this.selectedIndex].innerText.charAt(0));
  // or the jQuery version
  //$('#symbol').text($(this).find('option:selected').text().charAt(0));
});
table {
  border: 1px solid black;
  height: 20%;
  width: 40%;
  margin: 5%;
}
table tr td label,
table tr td input,
table tr td select {
  width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table>
    <tr>
      <td>
        <label for="Currency">Currency</label>
      </td>
      <td>
        <select name="currency" id="currency">
          <option value="Select" selected disabled="disabled">Select Currency</option>
          <option value="Dollar">$ USD</option>
          <option value="Pound">£ GBP</option>
          <option value="Euro">€ EUR</option>
          <option value="Yen">¥ YEN</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <label for="Revenue">Revenue</label>
      </td>
      <td>
        <input id="Revenue" type="text" required>
        <span id="symbol"></span>
      </td>
    </tr>
  </table>
</div>

Comments