Question

我正在将select input元素中的值添加到textarea中。然后我如何为此添加条件，以便如果选择某个选项值，它总是添加到所有其他选项的末尾？

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

在这个例子中，我希望“HTML /”始终位于textarea的末尾，无论它何时被选中。

FIDDLE

Answer 1

设置textarea的值时，请比较select的值。如果是要在末尾添加的字符串，则将其添加到值的末尾，否则在开头添加。

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

设置附加到texarea的字符串顺序

2 个答案: