Dropdown custom Text in dropdown after selecting a value

Question

Is it possible to have different text in dropdown after selecting a value? for example I have this dropdown:

<select name="selectsupplier">
    <option value="sup0001">sup0001 - Supplier 1</option>
    <option value="sup0002">sup0002 - Supplier 2</option>
</select>

If I select the first option, the usual dropdown text will be "sup0001 - Supplier 1". Is it possible to change it to only the Supplier's code (sup0001) without the name?

Instead of this:

the selected text should be like this:

Answer 1

 $('#phoneCallingCode').change(function() { $("#ShowNumber").val("+" + $("#phoneCallingCode option:selected").val()) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <select name="phoneCallingCode" id="phoneCallingCode" class="input"> <option value="sup0001">sup0001 - Supplier 1</option> <option value="sup0002">sup0002 - Supplier 2</option> </select> <input type="text" id="ShowNumber"/> 

i hope it will help you, your concept something similar to this

Answer 2

You can do something like this. I believe you want to change the option text on page load.

 $(document).ready(function() { var options = $("select[name=selectsupplier]").children(); options.each(function(i, item) { var optionText = $(item).text().replace(/ -.*/g, ''); $(item).text(optionText); }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select name="selectsupplier"> <option value="sup0001">sup0001 - Supplier 1</option> <option value="sup0002">sup0002 - Supplier 2</option> </select>