如何动态更新选择值？答案

【问题标题】：How to dynamically update select value?如何动态更新选择值？
【发布时间】：2016-04-21 15:14:05
【问题描述】：

谁能帮我完成以下操作？

我有一个下拉字段，其中包含鲜花名称。默认值为“选择您最喜欢的花”。点击或点击时，下拉菜单会打开并显示选项列表，当用户选择特定值时，该字段会显示所选花名。

我需要附加最喜欢的花：然后是选定的值。你们能帮我解决这个问题吗？

请看图片：

<select> 
  <list> Select your favorite flower</list> 
  <list>Rose</Rose> <list>Marigold </list>
  <list>Lily</lily> 
</select>

【问题讨论】：

你的花在哪里？我的意思是代码？
分享一些你目前尝试过的相关html代码
HTML 代码
@ZohdiR，你为什么要放屏幕截图...只是放你的真实代码，以便我们更好地帮助你
我不是开发人员，因此我附上了图片。请查看问题中的附加图片。非常感谢。

标签： javascript jquery

【解决方案1】：

使用更改事件，将带有文本的跨度附加到所选选项：

$('select').on('change',function() {
$('option').find('span').remove();//remove previous selected span
var val = $(this).find(':selected').html();//get the text/html of the potion
$(this).find(':selected').html('<span>Favorite Flower: </span>'+val);//change the text with the option
});

https://jsfiddle.net/r5377h21/

或：

$('select').on('change',function() {
$('option').find('span').remove();
var selected = $(this).find(':selected'),
    val = selected.html(); 
if(!selected.is('option:first')) {
$(this).find(':selected').html('<span>Favorite Flower: </span>'+val);
}
});

https://jsfiddle.net/r5377h21/1/

【讨论】：

他们是个问题。一旦用户从下拉列表中选择了一个特定的值，下次他打开下拉列表时，值就不是原来的了，即不再是玫瑰、万寿菊等，而是第一个值是：最喜欢的颜色：玫瑰、万寿菊、百合等。怎么办我们确保选择后的下拉值恢复为原始值？感谢您的帮助。

【解决方案2】：

你可以试试this。

如果您需要任何更改，请告诉我

代码：

<script>
function test(obj)
{
  $("select option").each(function(){
     $(this).text($(this).text().replace("favorite flower - ",""))
  })
  if($("option:selected",$(obj)).val() != -1){
  $("option:selected",$(obj)).text("favorite flower - "+$("option:selected",$(obj)).text())
  }
}
</script>
<select onchange="test(this)">
  <option value="-1">Select your favorite flower</option>
    <option>Rose</option>
    <option>Marigold</option>
  <option>Lily</option>
</select>

【讨论】：

你可以这样做