選擇值后，下拉菜單中的下拉菜單自定義文本

Question

選擇一個值后，下拉菜單中是否可能有其他文本？ 例如我有這個下拉菜單：

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

如果選擇第一個選項，則通常的下拉文本將是“ sup0001-供應商1”。 是否可以將其更改為僅供應商的代碼（sup0001）而沒有名稱？

代替這個：

所選文本應如下所示：

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"/> 

我希望它會幫助您，您的概念與此類似

Answer 2

你可以做這樣的事情。 我相信您想更改頁面加載時的選項文本。

 $(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>