1
votes

Valeurs DropDown de paramètre sous forme d'URL utilisant JavaScript?

J'ai le code ci-dessous. Il a 3 valeurs d'option de liste déroulante. Actuellement, lors du changement de la sélection déroulante, une alerte est lancée.

Maintenant, je souhaite réaliser ce qui suit: paramétrer mes valeurs de liste déroulante en tant qu'URL, de sorte que c'est-à-dire lorsque je saisis l'URL suivante dans un navigateur: file: //test.ds.waq.cb.uk/anywhere /UserData/PSStore02/u1718987/Desktop/new.html avec ? MySelect = BMW à la fin, puis le navigateur ouvre la liste déroulante avec la valeur BMW renseignée .

Ou si j'entre file: //test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u1718987/Desktop/new.html? mySelect = Audi , le navigateur ouvre le menu déroulant avec Audi rempli.

<script>
function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

</body>
</html>

Besoin de modifier le script ci-dessous, pour paramétrer la sélection déroulante en tant qu'URL, s'il vous plaît aviser. p >

 <!DOCTYPE html>
    <html>
    <body>

    <p>Select a new car from the list.</p>

    <select id="mySelect" onchange="myFunction()">
      <option value="Audi">Audi
      <option value="BMW">BMW
      <option value="Volvo">Volvo
    </select>


    <p id="demo"></p>

javascript jquery html

6 commentaires

Réponse: l'extrait de code ne fonctionnera pas, veuillez copier le code, puis modifier le paramètre de l'url pour voir les résultats

Modifié ma réponse. Maintenant ça marche correctement

@Ibnelaiq ne fonctionne toujours pas

ça marche vérifier le paramètre

@Ibnelaiq je saisis le fichier: //test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u171898‌ 7 / Desktop / new.html avec? MySelect = BMW et Audi sont toujours sélectionnés, j'utilise notepad ++

Copiez ma sélection et mes options. Et assurez-vous que jquery est attaché

5 Réponses :

1
votes

Vous pouvez facilement récupérer le paramètre de l'URL à l'aide d'expressions et de certaines conditions pour sélectionner l'option. Modifiez la valeur mySelect dans l'URL pour la vérifier. JAVASCRIPT:

<select>
  <option class="Audi">Audi</option>
  <option class="BMW">BMW</option>
  <option class="Volvo">Volvo</option>
</select>

HTML: final

    function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
        vars[key] = value;
    });
    return vars;
}
$(document).ready(function(){
    var data = getUrlVars()["mySelect"];
if(data == "Audi"){
  $('select').prop('selectedIndex', 0);
}
else if(data == "BMW"){
$('select').prop('selectedIndex', 1);
}
else if(data == "Volvo"){
$('select').prop('selectedIndex', 2);
}
});

4 commentaires

quelle URL dois-je saisir?

Comme ça, ? MySelect = Audi à l'url

Vous pouvez améliorer cela en supprimant les instructions if dans le gestionnaire de document prêt et en boucle et comparez les valeurs. De cette façon, si l'OP ajoute plus d'éléments à la sélection, ils n'ont pas besoin de modifier le code.

@archer Attendez un moment. je ferai

0
votes

Vous pouvez lire les paramètres d'url une fois la boîte de sélection chargée, voir le code ci-dessous

HTML:

    <!DOCTYPE html>
        <html>
        <body>

        <p>Select a new car from the list.</p>

        <select id="mySelect" onchange="myFunction()" onload="setMySelect()">
          <option value="Audi">Audi
          <option value="BMW">BMW
          <option value="Volvo">Volvo
        </select>


        <p id="demo"></p>


<script>
 function setMySelect() {
    var urlParams = new URLSearchParams(window.location.search);
    var mySelect = urlParams.get('mySelect');
    if(mySelect)
    document.getElementById("mySelect").value = mySelect;
}
function myFunction() {
  var x = document.getElementById("mySelect").value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

</body>
</html>

4 commentaires

cela ne semble pas fonctionner, il n'exécute même pas la fonction

@Bhushan Kawadkar cela ne semble pas fonctionner s'il vous plaît aviser

Fondamentalement, lorsque j'ouvre FireFox et que j'entre le fichier URL: //test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u171898‌ 7 / Desktop / new.html avec? MySelect = BMW BMW n'est pas sélectionné sur le la liste déroulante affiche toujours Audi, également si j'entre dans le fichier: //test.ds.waq.cb.uk/anywhere/UserData/PSStore02/u171898‌ 7 / Desktop / new.html avec? mySelect = Volvo toujours Audi est affiché

Lorsque vous entrez l'url sur le navigateur et appuyez sur le bouton ENTRÉE, l'URL reste la même ou elle est modifiée après le chargement de la page? Si l'URL est modifiée après le chargement de la page, cette solution ne fonctionnera pas, vous devez apporter des modifications côté serveur pour conserver l'URL ou lire le paramètre de demande avec le code backend et le transmettre à la page afin que la page puisse lire les paramètres et définir la case de sélection valeurs en conséquence

0
votes

utilisez cette réponse pour extraire les requêtes de recherche. Ensuite, définissez simplement la valeur lors du chargement avec la valeur appropriée.

<script>
function setValue(value) {
  document.getElementById("mySelect").value = value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
let urlParams = new URLSearchParams(window.location.search);
setValue(urlParams.get('mySelect');
</script>

MISE À JOUR pour avoir les deux dans le même script.

<script>
function setValue(value) {
  document.getElementById("mySelect").value = value;
  alert (document.getElementById.innerHTML = "You selected: " + x);
}
</script>

0 commentaires

0
votes

Vous pouvez essayer ce qui suit.

var url = new URL(window.location);
var params = new URLSearchParams(url.search.slice(1));
for (let [key, value] of params.entries()) {
    if(params.has(key) && key == "mySelect") {
        document.getElementById(key).value = value;
    }
}
document.getElementById("mySelect").addEventListener("change", (e) => {
    params.set("mySelect",e.target.value);
    url.search = params.toString();
    let new_url = url.toString();
    window.location.assign(new_url);
})

0 commentaires

0
votes

J'avais besoin du window.onload suivant car cette fonction ne se chargeait pas.

<!DOCTYPE html>
            <html>
            <body>

            <p>Select a new car from the list.</p>

            <select id="mySelect" onchange="myFunction()" onload="setMySelect()">
              <option value="Audi">Audi</option>
              <option value="BMW">BMW</option>
              <option value="Volvo">Volvo</option>
            </select>


            <p id="demo"></p>


    <script>
     <!-- function setMySelect() { -->

     window.onload = function() {
        var urlParams = new URLSearchParams(window.location.search);
        var mySelect = urlParams.get('mySelect');
        if(mySelect)
        document.getElementById("mySelect").value = mySelect;
    }
    function myFunction() {
      var x = document.getElementById("mySelect").value;
      alert (document.getElementById.innerHTML = "You selected: " + x);
    }
    </script>

    </body>
    </html>

0 commentaires