Home / Questions / 11088
Accepted
Ivxn
Asked: 2020-05-27 06:58:15 +0800 CST 2020-05-27 06:58:15 +0800 CST

How to validate select option is not repeated in textarea?

  • 772

I have an element html selector comboboxof which when they select an option it is inserted in a textareaHow can I validate that textareaa repeated option is not inserted in it?

I tried to validate with the code below, but I couldn't:

            $("#accesoriosEquipo").change(function () {

                $("#accesoriosEquipo option:first").val();
                              

                if ($('#accesoriosEquipo').val() == $("#accesoriosElegidos").val()) {
                    alert("Opción ya elegida")
                } else {
                    //alert("ok");
                    if ($("#accesoriosElegidos").val() == "") {
                        $('#accesoriosElegidos').val($('#accesoriosEquipo').val());
                    } else {
                        $('#accesoriosElegidos').val($('#accesoriosElegidos').val() + "\n" + $("#accesoriosEquipo").val());
                    }

                }

            });

javascript

2 Answers

  1. Best Answer

    Look at this example.

    I decompose the text of the textarea in an array separating the values ​​by the line break and check if the value exists with the indexOf method:

    $("#accesoriosEquipo").change(function () {
  var valor = $("#accesoriosEquipo").val();
  var texto = $("#accesoriosElegidos").val();
  if (texto.split("\n").indexOf(valor) < 0 ){
    $("#accesoriosElegidos").val(texto + valor + "\n");
  }
  else{
    alert("Opción ya elegida");
  }
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="accesoriosEquipo">
  <option value="Opción 1">Opción 1</option>
  <option value="Opción 2">Opción 2</option>
  <option value="Opción 3">Opción 3</option>
  <option value="Opción 4">Opción 4</option>
  <option value="Opción 5">Opción 5</option>
  <option value="Opción 6">Opción 6</option>
</select>
<br />
<textarea id="accesoriosElegidos" rows="10" cols="80"></textarea>

    • 2

  2. Solution:

    $("#accesoriosEquipo").change(function () {
  var texto = $('#accesoriosEquipo option:selected').text();
$("#accesoriosElegidos").append($('<option>',{value:this.value, text:texto}));
  $('#accesoriosEquipo option:selected').hide();
  $('#accesoriosEquipo option:first').attr('selected','selected');
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Accesorios Equipo
<select id="accesoriosEquipo">
  <option>Elegir Uno</option>
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<br/>
Accesorios Elegidos
<select id="accesoriosElegidos">
  <option>Ya Elegidos</option>
</select>

    • 1