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”的选项则不显示任何内容。

E.g。如果用户选择带有文本“Chocolate”的选项，则textarea中的文本应该是这样的：

“买巧克力”

如果选择了其他选项，则应将文字替换为“购买焦糖”这样的新短语

但是如果选择了值为“none”的那个，那么两个选项文本都不应该在textarea中显示其他文本（“Buy”）。

有必要仅显示textarea中的选项文本，而不显示选项值。

Answer 1

以下是代码：

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

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

就是这样。

Answer 2

试试这个Jquery代码： -

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

OR

$('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("");   
});

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

2 个答案: