javascript - 根据列表框选择的数量更新 TextArea 值

Question

如果我有一个列表框和一个文本区域:

<textarea id="MyTextArea"></textarea>

<select id="SelectList" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

我想做的是...如果有超过 0 个选择的选项.. 然后将文本 There are selections 附加到文本区域。

如果用户取消选择的选项达到 0 个选择的选项，则从文本区域中删除该字符串，但保留用户在该文本区域中键入的任何其他内容。

这是我的:

$("#SelectList").change(function(){
    var count = $("#SelectList> option:selected").length;
    var string = "There are selections.";
    var txtVal = $("#MyTextArea").val();

    if (count > 0 && txtVal.indexOf(string) == -1) {
        $("#MyTextArea").append(string);
    }
    else if (count > 0 && txtVal.indexOf(string) != -1) {
    }
    else if (count === 0 && txtVal.indexOf(string) != -1) {
        var indexOfString = $("#MyTextArea").value.indexOf(string);
        $("#MyTextArea").value.substring(0, indexOfString - 1);
    }
});

这适用于仅添加一次字符串。但是当我取消选择所有选项以便有 0 选择时..我得到这个:

Unable to get property 'indexOf' of undefined or null reference

在这一行:var indexOfString = $("#MyTextArea").value.indexOf(string);

感谢任何帮助。

Answer 1

应该是:

var indexOfString = $("#MyTextArea").val().indexOf(string);

因为 $("#MyTextArea") 是一个 jQuery 元素