如何动态地将所选选项附加到一个 div 并在更改所选选项时更新？

Question

我有一个HTML代码：一个标签和一个标签: <select> <option>Please select one</option> <option>Volvo</option> <option>Saab</option> <option>Mercedes</option> <option>Audi</option> </select> <div></div> 当我选择一个选项时，我希望将所选选项的值添加到<div>元素中。 以下是我的js代码： $('select').on('change', function (e){ $('div').append("//not sure how to write code here"); }); 我应该添加什么内容在append()中，以便当用户选择一个选项时，它将显示在我的div上，如果用户更改到另一个选项，它将更新内容？ 例如，如果我选择了Volvo，“Volvo”文本将显示在我的div中，如果我改变选择到Saab，“Saab”文本将显示在我的div中来替换“Volvo”

- OPK

---

жіЁж„ҸidйҖүжӢ©еҷЁпјҡ$('#myDiv').text($(this).val()); - Teemu

@Teemu，您介意将其添加为答案吗？ - Spencer Wieczorek

@SpencerWieczorek 实际上我正在回答这个问题，但是leo.fcx更快... - Teemu

Answer 1

$.append将新的html元素添加到target元素中。

请改用$.text。它将替换div内容为新值。还可以使用$.val从select标记中获取当前选择的值。请注意，this指的是select标记。

请尝试以下操作：

 $('select').on('change', function (e){
     $('div').text($(this).val());
 });  

请看演示：

$('select').on('change', function(e) {
  $('div').text($(this).val());
});

div {
  border: 1px dashed #999;
  padding: 15px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>Please select one</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

<div>Anything selected yet</div>

- leo.fcx

---

原帖中提到他们想要追加而不是替换，这意味着 div 中可能已经存在其他数据需要保留。如果是这种情况，可以向 div 添加一个空的 span，并在该 span 上调用 text 函数，以确保任何先前的内容仍然存在于 div 中。 - Nick Mertin

@MagikM18 实际上他们想要的是.text()： - “如果我改变为Saab，‘Saab'文本将显示在我的div中以替换‘Volvo’”。 - Spencer Wieczorek

@Spencer 是的，我明白了，也许我应该澄清一下。我并不是说每次都要添加一个新的跨度，我是说如果他们在 div 中有其他文本或 HTML（例如，“当前选择：”），那么他们可以在 div 中使用一个跨度来实现这一点，并且每次使用相同的跨度；这将导致“当前选择：Volvo”或“当前选择：Saab”。 - Nick Mertin

@MagikM18 在 OP 的例子中，div 似乎是空的。不过你说得对，当我们需要更通用的代码时。 - Teemu

Answer 2

使用 .text() 来替换 .append()，示例如下：

$('select').on('change', function(e) {
  $('div').text($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option>Please select one</option>
  <option>Volvo</option>
  <option>Saab</option>
  <option>Mercedes</option>
  <option>Audi</option>
</select>

<div></div>

- Akshay Chawla

Answer 3

对不起，我知道这是一篇旧帖子，但是虽然最初的回答有所帮助，但它并不是解决方案。我想出了一个修改，如下：

$('select').on('change', function (e){ var lang = $(this).val(); $('.someClass').append(lang);

我发布它以防对他人有所帮助。这将把所选文本附加到您需要附加到的任何内容上。在我的情况下，是将其附加到锚点。

- Toasterdroid