Как показать текст выбранной опции в 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».

E.g. если пользователь выбирает опцию с текстом «Шоколад» текст в текстовое поле должно быть что-то вроде этого:

«Купить Шоколад»

и если он выбран другой вариант текст должен быть заменен новой фразой типа «Купить Caramel "

, но если выбрано значение со значением =" none ", в текстовом поле не должно отображаться дополнительный текст (« Купить »).

Необходимо отобразить только текст текста в текстовом поле, но не значение параметра.

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

ИЛИ

$('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 Markup как:

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