テクスチャに追加される文字列の設定順序

Question

私はselect input要素からテキストエリアに値を追加しています。これに条件を追加すると、特定のオプション値が選択された場合、他のすべての終わりに常に追加されます。この例では

HTML

<p> 
    <select name="selectfield" id="selectfield"> 
     <option value="" selected>- Select -</option> 
     <option value="HTML/">HTML/</option> 
     <option value="CSS/">CSS/</option> 
     <option value="JQUERY/">JQUERY/</option> 
    </select> 
</p> 

<textarea style="width:100%" name="info" id="info" cols="20" rows="5"></textarea> 

jQueryの

$("#selectfield").on("change", function() { 
    var $select = $(this); 
    $("#info").val(function(i, val) { 
     return val += $select.val(); 
    }) 
}); 

、私はいつもかかわらず、それが選択されている場合のTEXTAREAの終わりにあるように、 "HTML /" をしたいと思います。

FIDDLE

Answer 1

あなたがテキストエリアの値を設定すると、選択の値が何であるかを比較します。最後に追加する文字列の場合は、値の末尾に追加します。それ以外の場合は先頭に追加します。上記

if($select.val()==="HTML/") 
    return val = val + $select.val(); 
else 
    return val = $select.val() + val; 

https://jsfiddle.net/qshcr01a/

Answer 2

よりスマートであるが、これも動作します：

$("#selectfield").on("change", function() { 
    var $select = $(this); 
    $("#info").val(function(i, val) { 
    if (val=="HTML/"){ 
     return $select.val()+"HTML/"; 
     }else{ 
     if(val=="JQUERY/HTML/"){ 
     return "CSS/JQUERY/HTML/"; 
     }else if (val=="CSS/HTML/"){ 
     return "JQUERY/CSS/HTML/"; 
     }else{ 
     return val+= $select.val() 
     } 
     } 
    }) 
});