javascript - 将一个文本字段中的列表构建到另一个文本字段中，然后选择从列表中删除项目

Question

我希望能够在下方的文本字段中输入文本，单击“添加到列表”并将其填充到上方的文本区域中。然后，如果您单击文本区域中的项目，您可以选择将其删除。到目前为止，我已经能够将文本字段的值传输到文本区域，但还需要其他帮助。可以在线找到工作演示 HERE和一个 JS Fiddle 由于某种原因无法工作(有人可以告诉我为什么它在本地和其他地方工作)JS Fiddle link.这是我到目前为止所拥有的:

HTML:

    <div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
  <td  colspan="2" valign="top">
    Problem List:<BR />
    <textarea rows="4" cols="50" id="ProbAreaTo" ></textarea><BR />
    <button type="button" class="btn btn-default ">Delete Selected Problem</button>
      </td>
  </tr>
<tr>
  <td colspan="2" valign="top"><p>To add a problem to the list, type it in the New Problem text field and then click &quot;Add to List&quot;. To remove a problem, click it in the list, then click, &quot;Delete Selected Problem&quot;<P>
    <strong>New Problem</strong><P>
    <input type="text" id="ProbAreaFrom">
     <P>
    <button type="button" class="btn btn-default" id="ProbListBtn" onclick="ListProbs();">Add to List</button>
    </p>
</td>
  </tr>
  </tbody>
 </table>
 </div>

JavaScript

    function ListProbs() {
    if (document.getElementById("ProbListBtn").onclick) {
    var txt1 = document.getElementById("ProbAreaFrom").value;
   ProbAreaTo.value = txt1;
    } 
   }

Answer 1

抱歉，您的工作演示也无法正常工作。它只能添加 1 个项目，添加第二个项目只会覆盖第一个项目。

很抱歉，文本区域不是正确的方法，因为您希望放置文本区域的区域只能选择，不可写入和可编辑，否则它就无法实现使用单行文本框添加项目的目的。

我建议使用尺寸为 5 的选择框，例如

<select id="selectbox" name="selectbox" size="5">

</select>

然后，将选择框的CSS设置为overflow:hidden;，这样它就不会显示滚动条(如果JavaScript中选择框长度> 5，则可以将溢出设置为自动)

在添加按钮上的 JavaScript 中，您可以执行以下操作:

    var x = document.getElementById("selectbox");
    var txt1 = document.getElementById("ProbAreaFrom").value;
    var option = document.createElement("option");
    option.text = txt1
    x.add(option);

这将获取文本框值并将其添加到选择框中。 然后，您可以轻松地对要在删除按钮调用时删除的选定项目进行编码。