如何在textarea中显示所选选项的文本

Question

<select name="sweets">
<option value="none"></option>
<option>Chocolate</option>
<option>Candy</option>
<option>Taffy</option>
<option>Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>

<textarea id="show_sweets"></textarea>

<script>
$( "select" )
.change(function () {
var str = "";
var txtinf = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "textarea" ).text(str);
})
.change();


</script>

请说明如何显示每个选定选项的文本 + 附加文本“购买”。但如果选择值为“none”的选项，则不显示任何内容。

例如如果用户选择带有文本“巧克力”的选项，则 textarea 中的文本应该是这样的：

“买巧克力”

如果选择了其他选项，则文本应替换为“购买焦糖”等新短语

但如果它选择了 value="none" 的那一个，则 textarea 中不应该显示任何选项文本或附加文本（“购买”）。

必须在 textarea 中只显示选项文本而不显示选项值。

Answer 1

试试这个 Jquery 代码：-

$('select[name="sweets"]').change(function(){
  $("#show_sweets").val("Buy " + $('select[name="sweets"] option:selected').text());
});

或

$('select[name="sweets"]').change(function(){
  var textval = $(this).find(":selected").text();  //get text as shown here(a more shorter way as shown in accepted answer)
  if(textval != ""){
    textval = "Buy " + textval;
  }

  $('#show_sweets').val(textval);
});

---

或者只是将您的 HTML 标记更正为：

<select name="sweets">
<option value="none"></option>
<option value="Chocolate">Chocolate</option>
<option value="Candy">Candy</option>
<option value="Taffy">Taffy</option>
<option value="Caramel">Caramel</option>
<option value="Fudge">Fudge</option>
<option value="Cookie">Cookie</option>
</select>

<textarea id="show_sweets"></textarea>

然后使用这个 Jquery 代码：-

$('select[name="sweets"]').change(function(){
  if($(this).val()!="none")
  $('#show_sweets').val("Buy " + $(this).val());
  else
  $('#show_sweets').val("");   
});

Answer 2

代码如下：

$('select[name="sweets"]').change(function(){
    var text = $(this).find("option:selected").text();
    if(text != ""){
       text = "Buy "+text;
    }

    $('#show_sweets').val(text);
});

就是这样。