Tengo este formulario y no puedo cambiar nada al respecto (ids, vals, etc.) porque lo genera automáticamente el creador de mi sitio web. ¿Es posible usar código o incluso mejor, simplemente usar la URL para seleccionar automáticamente una opción? Por ejemplo, utilice la URL
https://mywebsite.com/GCValue=50/ para seleccionar la opción 50 en el formulario a continuación, en lugar de los 10 en los que estará predeterminado? Soy un principiante con JS y JQuery, así que estoy feliz de usarlos y aprender un poco sobre ellos durante el proceso, si es posible.
<select id=GCValue> <option val="10">10</option> <option val="25">25</option> <option val="50">50</option> <option val="100">100</option> <option val="250">250</option> </select> <br />Se agradece cualquier ayuda o enlace externo que me indique la dirección correcta.
Use window.location.pathname para obtener la ruta de la página actual, luego use un simple regex.exec(url) para capturar cualquier cosa que coincida con /=([0-9])+/ . Esto coincidirá con cualquier cosa en el formato de "= 12345" y devolverá "12345" como la coincidencia.
var url = "https://mywebsite.com/GCValue=50/"; // in reality, use this: // var url = window.location.pathname; var regex = /=([0-9]+)/g; var match = regex.exec(url); document.getElementById("GCValue").value = match[1]; <select id="GCValue"> <option val="10">10</option> <option val="25">25</option> <option val="50">50</option> <option val="100">100</option> <option val="250">250</option> </select> <br /> Si quisiera usar muchos parámetros, simplemente extienda la misma lógica. Por ejemplo, imagina: /GCValue=50/Page=765/Index=42/ ...
var url = "https://mywebsite.com/GCValue=50/Page=765/Index=42/"; // in reality, use this: // var url = window.location.pathname; var regex = /([A-Za-z0-9]+)=([0-9]+)/g; var match; while ((match = regex.exec(url)) != null) { document.getElementById(match[1]).value = match[2]; } <select id="GCValue"> <option val="10">10</option> <option val="25">25</option> <option val="50">50</option> <option val="100">100</option> <option val="250">250</option> </select> <br /> <input id="Page" type="text"><br> <input id="Index" type="text">ACTUALIZADO
Aquí hay una solución que usa parámetros de consulta de URL.
// Your link should look like this: https://www.boothemusic.com/gift-card/?price=50 const selectList = document.getElementById('GCValue'); const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const price = urlParams.get('price'); // change "price" to anything you want. for (let option of selectList.options) { let chosen = option.value; if(chosen === price) { selectList.value = price; } } <select id="GCValue"> <option value="10">10</option> <option value="25">25</option> <option value="50">50</option> <option value="100">100</option> <option value="250">250</option> </select> const price = urlParams.get('price'); asigna el valor asociado con el parámetro de búsqueda dado al price (consulte este artículo para obtener más información sobre URLSearchParams). Luego, el bucle for-of examina las opciones seleccionadas y busca una coincidencia para la variable de price . Si alguna de las opciones coincide con el price ( 50 en este caso), entonces su valor se establece como price , por lo tanto, seleccione 50 en su menú desplegable.