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

例如，如果我选择沃尔沃，＆＃34;沃尔沃＆＃34;文字将显示在我的div，如果我更改为Saab，＆＃34; Saab＆＃34;文本将显示在我的div中以替换＆＃34;沃尔沃＆＃34;

Answer 1

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

改为使用$.text。它会将div内容替换为新值。同时使用$.val从select标记中获取当前选定的值。请注意，this是指select代码

试试这个：

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

参见 JSFiddle demo

Answer 2

使用.text（）而不是.append（）。如下所示

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

Answer 3

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

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

我发布它，这有助于其他人。这会将所选文本附加到您需要附加到的任何内容上。在我的情况下，它是将它附加到一个锚。

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

3 个答案: