根据列表框选择的数量更新 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

.value 是一个纯 js 方法，您不能在 jQuery 对象 $("#MyTextArea") 上调用它，而是可以使用 val()，例如：

$("#MyTextArea").val().indexOf(string);

并且由于您已经将值存储在变量 txtVal 上，您可以像这样调用它：

$("#SelectList").change(function(){
    ...
    else if (count === 0 && txtVal.indexOf(string) != -1) {
        var indexOfString = txtVal.indexOf(string);
        txtVal.substring(0, indexOfString - 1);
    } 
});

注意： 你不应该在 textarea 上使用 append() 方法，而是使用 .val() ：

$("#MyTextArea").val(txtVal + string);

而不是：

$("#MyTextArea").append(string);

希望这对您有所帮助。

Answer 2

应该是：

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

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

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

Update TextArea value based on number of listbox selections

javascript

jquery

textarea

listbox