1

Estoy usando una aplicación llamada Tampermonkey para crear un script que me permita editar una página, solo trabaja con javascript o jQuery, no puedo editar html ni css.

Tengo un menú de opciones de esta manera:

<form action="feeding" method="post">
   <select id="feedingHay">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
   </select>

    <strong class="section-fourrage section-fourrage-target">3</strong>
</form>

Como le puedo hacer para que seleccione automáticamente el valor 3 de la entrada "feedingHay" a base del texto "3" de la entrada "strong"?

Tengo aventajado este código, pero no lo he echo funcionar.

var seleccion = document.getElementsByClassName("section-fourrage section-
fourrage-target");

for (var i = 0; i < seleccion.length; i++) {
var price = seleccion[i].innerText;

var select = document.getElementById("feedingHay");
select.value = seleccion.innerText;
}
0

1 respuesta 1

1

En este código obtengo el valor deseado usando querySelector y posteriormente su contenido en texto.

Posteriormente obtengo todos los elementos <option> bajo el <select> deseado y cambio su atributo selected basado en si coincide o no su atributo value con el obtenido en el paso anterior.

/* Buscamos una etiqueta "strong" con las clases "section-fourrage"
  y "section-fourrage-target" (da igual el orden) */
var seleccion = document.querySelector(
  "strong.section-fourrage.section-fourrage-target"
).innerText;

/* Obtenemos las opciones del "select" cuya id es "feedingHay" */
var opciones = document.getElementById('feedingHay').
  getElementsByTagName('option');

/* Marcamos el atributo "selected" basado en si coincide o no con el texto */
for (var i = 0; i < opciones.length; i++) {
  opciones[i].selected = opciones[i].innerText == seleccion;
}
<form action="feeding" method="post">
  <select id="feedingHay">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <strong class="section-fourrage section-fourrage-target">3</strong>
</form>

Si quieres que la selección sea por el valor (atributo value) el código se simplifica:

/* Buscamos una etiqueta "strong" con las clases "section-fourrage"
  y "section-fourrage-target" (da igual el orden) */
var seleccion = document.querySelector(
  "strong.section-fourrage.section-fourrage-target"
).innerText;

/* Marcamos la opción seleccionada por su valor */
var opciones = document.getElementById('feedingHay').value = seleccion;
<form action="feeding" method="post">
  <select id="feedingHay">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  <strong class="section-fourrage section-fourrage-target">3</strong>
</form>

2
  • Perfecto, muchas gracias funciono muy bien!!! Commented el 22 may. 2017 a las 10:03
  • 1
    De nada. Por cierto, ¿quieres que se haga la comprobación por su valor (value) o por su contenido de texto (innerText)? Si es por su valor (como mi respuesta inicial) el código podría simplificarse. Te he dejado un nuevo ejemplo en el que en vez de buscar su contenido de texto cambiamos el valor de la selección. Commented el 22 may. 2017 a las 10:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.