Necesito tu ayuda

¿Cómo hago para verificar si el valor de la opción de cuadro de selección contiene o no una coincidencia de '08C' y alerta (verdadero) si lo hace?

Un ejemplo o respuesta para trabajar sería apreciado. Lo siento de antemano por la falta de habilidades de codificación ya que esto está más allá de mi línea de pensamiento.

Una respuesta usando jQuery también es aceptable.

<select id="fin-code-lobj">
    <optgroup label="08C - Travel for Training">
        <option value="08C1">08C1 - Travel for Technical/Operational Training – Mandatory (for/by TC employees)</option>
        <option value="08C2">08C2 - Travel for Technical/Operational Training – Non-Mandatory</option>
        <option value="08C3">08C3 - Travel for Developmental Training</option>
        <option value="08C4">08C4 - Travel for Developmental Language Training</option>
        <option value="08C5">08C5 - Travel for Statutory Language Training</option>
    </optgroup>
</select>
-3
BobbyJones 28 feb. 2018 a las 21:19

4 respuestas

La mejor respuesta

Esto debería hacer el truco:

$("#fin-code-lobj").on("change", function(){
  if($(this).find("option:selected").val().indexOf("08C") > -1)){
    alert(true);
  }
});
1
Suthan Bala 28 feb. 2018 a las 18:25

Respuesta Aquí hay una solución que recorrerá cada valor tratando de localizar la cadena que desea. Escrito en JS puro para que no haya bibliotecas o dependencias de framework.

function funStart(){
  var objDropDown = document.querySelector("#fin-code-lobj");
  if (typeof(objDropDown)=="undefined"){
    console.log("Dropdown not located");
    return;
  }
  for (a = 1; a <= objDropDown.length; a++){
    if (objDropDown[a-1].value == "08C3"){
      alert("I found 08C5");
      console.log ("Found and alerted" + a);
    }
  }
}


document.addEventListener("DOMContentLoaded", funStart, false);
<select id="fin-code-lobj">
    <optgroup label="08C - Travel for Training">
        <option value="08C1">08C1 - Travel for Technical/Operational Training – Mandatory (for/by TC employees)</option>
        <option value="08C2">08C2 - Travel for Technical/Operational Training – Non-Mandatory</option>
        <option value="08C3">08C3 - Travel for Developmental Training</option>
        <option value="08C4">08C4 - Travel for Developmental Language Training</option>
        <option value="08C5">08C5 - Travel for Statutory Language Training</option>
    </optgroup>
</select>
0
DataCure 28 feb. 2018 a las 18:40

Alerta verdadera si:

  • hay muchos elementos selectos ...
  • al menos uno de ellos tiene una opción cuyo valor comienza con 08c (no distingue entre mayúsculas y minúsculas)
const matchOptionVal = ( options, str ) => alert (
  [...options].some(op => new RegExp("^"+str, "i").test(str) )
);

[...document.querySelectorAll("select")].forEach(sel => 
  matchOptionVal(sel.options, "08c")
);
<select id="fin-code-lobj">
    <optgroup label="08C - Travel for Training">
        <option value="08C1">08C1 - Travel for Technical/Operational Training – Mandatory (for/by TC employees)</option>
        <option value="08C2">08C2 - Travel for Technical/Operational Training – Non-Mandatory</option>
        <option value="08C3">08C3 - Travel for Developmental Training</option>
        <option value="08C4">08C4 - Travel for Developmental Language Training</option>
        <option value="08C5">08C5 - Travel for Statutory Language Training</option>
    </optgroup>
</select>
0
Roko C. Buljan 28 feb. 2018 a las 18:39

Puede hacerlo obteniendo el options en jquery usando $("#fin-code-lobj option") y luego verifíquelo así

$("#fin-code-lobj option").each(function() {
  $(this).val().indexOf("08C") != -1 ? console.log($(this).val() + "- true"): console.log($(this).val() + "- false");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="fin-code-lobj">
    <optgroup label="08C - Travel for Training">
        <option value="08C1">08C1 - Travel for Technical/Operational Training – Mandatory (for/by TC employees)</option>
        <option value="08C2">08C2 - Travel for Technical/Operational Training – Non-Mandatory</option>
        <option value="08C3">08C3 - Travel for Developmental Training</option>
        <option value="08C4">08C4 - Travel for Developmental Language Training</option>
        <option value="08C5">08C5 - Travel for Statutory Language Training</option>
        <option value="11">Dummy</option>
    </optgroup>
</select>
1
Sanchit Patiyal 28 feb. 2018 a las 18:24