如何將所選選項動態附加到 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);

我發布它以防它幫助別人。 這會將所選文本附加到您需要附加的任何內容。 就我而言，它是將它連接到錨點上。