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

如何验证选择选项在textarea中不重复？

  • 772

我有一个元素，html select或者combobox当他们选择一个选项时它被插入到一个元素中textarea我如何验证textarea没有插入重复的选项？

我尝试使用下面的代码进行验证，但我不能：

            $("#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

    看看这个例子。

    我将 textarea 的文本分解为一个数组，通过换行符分隔值，并使用 indexOf 方法检查该值是否存在：

    $("#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. 解决方案：

    $("#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