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

Question

我有我的 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以替换“沃尔沃”

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

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>

Answer 3

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

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

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