选择值后，下拉列表自定义文本在下拉列表中

Question

选择值后，是否可以在下拉列表中显示不同的文字？例如，我有这个下拉列表：

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

如果我选择第一个选项，通常的下拉文本将是“sup0001 - Supplier 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

你可以这样做。我相信您想要在页面加载时更改选项文本。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;