Question

我希望能够在下部文本字段中输入文本，单击“添加到列表”并将其填充到上面的文本区域中。然后，如果单击文本区域中的项目，则可以选择将其删除。到目前为止，我已经能够将文本字段的值传输到文本区域，但除此之外还需要帮助。可以在网上找到一个工作演示HERE和一个由于某种原因无法工作的JS小提琴（有人可以告诉我它为什么在本地和其他地方工作）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项，添加第二项只会覆盖第一项。

对不起，但是textarea不是正确的方法，因为你想要的区域只能选择textarea，不可写和可编辑，否则它会使用单行文本框添加项目的目的无效。 / p>

我建议使用大小为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);

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

Answer 2

选择框用于存储和删除新创建的元素。此代码从上面给出的示例完成，它确实从选择框中删除元素，并在单击添加后清除输入文本框。这是一个有效的JS FIDDLE

CSS

#sbox {
overflow: hidden;
width: 200px;
 }

HTML

<div class="table-responsive">
<table class="table table-bordered">
<tbody>
<tr>
  <td  colspan="2" valign="top">
    Problem List:<BR />

    <select id="sbox" name="selectbox" size="5"></select>
    <BR>
    <button type="button" class="btn btn-default" onclick="DeleteProbs();">Delete 
    Selected Problem</button>
      </td>
  </tr>
<tr>
  <td colspan="2" valign="top"><p>Instructions<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() {
var x = document.getElementById("sbox");
    var txt1 = document.getElementById("ProbAreaFrom").value;
    var option = document.createElement("option");
    option.text = txt1
    x.add(option);
    ProbAreaFrom.value="";
} 

   function DeleteProbs() {
    var x = document.getElementById("sbox");

    for (var i = 0; i < x.options.length; i++) {
    if (x.options[i].selected) {
        x.options[i].remove();
     }
   }
 }

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

2 个答案: