javascript - 更改时在 div 中显示选项值

Question

如何使用 jquery 在空 div 中显示选项的选定值？

$(document).ready(function() {
  let from_select = $('#from_select');
  let from_text = $('#from');

  //example#1
  from_select.on('change', function() {
    from_text.append($("option:selected").val());
  })

  //example#2
  from_select.on('change', function() {
    from_text.append($("#test option:selected").val());
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from_select">
  <option id="test" value="gel" selected data-buy="1" data-sell="1">GEL</option>
  <option id="test" value="usd" data-buy="" data-sell="">USD</option>
  <option id="test" value="eur" data-buy="" data-sell="">EUR</option>
  <option id="test" value="rub" data-buy="" data-sell="">RUB</option>
</select>

<div id="from"></div>

在example#1中它可以工作，但是我无法删除在#fromdiv 中传递的最后一个值。但在example#2中它不起作用，我不知道为什么但它不是 gettind id #test。

标签： javascripthtmljquerydom

Answer 1

示例#1

1. 您可以从中读取选定的值$(this).val()。
2. 您应该使用.html而不是.append.it 将替换先前添加的值form

示例#2

第二个不起作用，因为#tornike您的标记中没有元素的 id。这没有必要。因为您已经参加了onchange活动，所以您将从活动中获得价值。所以id目标是不必要的

$(document).ready(function() {

  let from_select = $('#from_select');
  let from_text = $('#from');

  //example#1
  from_select.on('change', function() {
    from_text.html($(this).val());
  })

   //not necessary 
  //example#2
 // from_select.on('change', function() {
   // from_text.append($("#tornike option:selected").val());
  //})

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="from_select">
  <option id="test" value="gel" selected data-buy="1" data-sell="1">GEL</option>
  <option id="test" value="usd" data-buy="" data-sell="">USD</option>
  <option id="test" value="eur" data-buy="" data-sell="">EUR</option>
  <option id="test" value="rub" data-buy="" data-sell="">RUB</option>
</select>



<div id="from">

</div>