如何将所选选项动态附加到 div 并在所选选项更改时更新？答案

【问题标题】：How to dynamically append selected option to a div and update if selected option is changed?如何将所选选项动态附加到 div 并在所选选项更改时更新？
【发布时间】：2015-09-04 17:47:22
【问题描述】：

我有我的 HTML：<select> 和 <div>：

  <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上，如果用户更改为另一个选项，它会更新内容？

例如，如果我选择沃尔沃，“沃尔沃”文本将显示在我的div，如果我更改为Saab，“萨博”文本将显示在我的div 中以替换“沃尔沃”

【问题讨论】：

$('#myDiv').text($(this).val()); 注意 id 选择器。
@Teemu 你介意添加这个作为答案吗？
@SpencerWieczorek 实际上我正在寻找答案，但 leo.fcx 更快......

标签： javascript jquery html

【解决方案1】：

$.append 在target 元素中添加新的html element。

改用$.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>

【讨论】：

OP 说他们想要追加而不是替换，这意味着应该保留 div 中已经存在的其他数据。如果是这种情况，那么可以在 div 中添加一个空的 span，并且可以在这个 span 上调用 text 函数，确保任何可渗透的内容都保留在 div 中。
@MagikM18 其实他们想要.text(): - “如果我换成萨博，“萨博”文本将出现在我的 div 中以替换“沃尔沃””跨度>
@Spencer 是的，我明白这一点，也许我应该澄清一下。我并不是说每次都应该添加一个新的跨度，我是说如果他们在 div 中有其他文本或 HTML（例如，“当前选择：”），那么他们可以在 div 内使用跨度为此，每次都使用相同的跨度；这将导致“当前选择：沃尔沃”或“当前选择：萨博”
@MagikM18 在 OP 的示例中，div 似乎是空的。不过，当我们需要更通用的代码时，您说得有道理。

【解决方案2】：

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

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

我发布它以防它帮助其他人。这会将所选文本附加到您需要附加的任何内容。就我而言，它是将其附加到锚点上。

【讨论】：

【解决方案3】：

使用.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>

【讨论】：