Problem when placing and deleting elements of a textarea html select

Question

Problem when placing and deleting elements of a textarea html select

Navigation

#1 by (4 votes)

3

I want to place the elements of a select to a textarea, the code that I have works well to add the text, but the problem arises when deleting the textarea text, if I delete something from it, it does not let me reposition more text from the select, then I put the code that I have.

function agregar(texto){
  console.log(texto);
  $("#test1").append(texto+"\n");
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  <title>Problema</title>
</head>
<body>
<select name="" id="test" onchange="agregar($('#test option:selected').text())">
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
  <option value="4">Cuatro</option>
</select>
  <br/>
<textarea name="" id="test1" cols="30" rows="10"></textarea>
</body>
</html>

How could I solve this problem, or why is this?

jquery html5

asked by Juan Pinzón 27.10.2017 в 17:10

source

1 answer

Sort div in columns Poor handling of events [SFML]

score 4 · Accepted Answer

Well, I would solve it in the following way:

textarea is a text entry element so it would not capture its value with .html() if not with .val() and likewise it would be assigned as it is really the function that corresponds to it, here I leave a example:

function agregar(texto){
  var html = $("#test1").val();
  html += texto + "\n";

  $("#test1").val(html);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" id="test" onchange="agregar($('#test option:selected').text())">
  <option value="1">Uno</option>
  <option value="2">Dos</option>
  <option value="3">Tres</option>
  <option value="4">Cuatro</option>
</select>
  <br/>
<textarea name="" id="test1" cols="30" rows="10"></textarea>