J'ai ajouté une liste déroulante d'état à ma page d'accueil, qui utilise wordpress / elemntor.
Lorsqu'un élément est sélectionné dans la liste déroulante, je voudrais rediriger l'utilisateur vers une autre URL. Par exemple, lorsque Georgia est sélectionnée, je souhaite rediriger vers cette URL: https://www.everlastingopportunities.com / georgia /
Comment puis-je faire en sorte que la page accède à l'URL ci-dessus lorsque Georgia est sélectionnée dans la liste déroulante?
<select>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<!-- ... list continues ... -->
</select>
3 Réponses :
Vous pouvez le faire facilement avec jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectCountry">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<!-- ... list continues ... -->
</select>
<script type="text/javascript">
$( document ).ready(function() {
$("#selectCountry").change(function(){
window.location.href = "https://www.everlastingopportunities.com/" + $("#selectCountry > option:selected").text() + "/";
});
});
</script>
Vous pouvez y parvenir en passant l'option sélectionnée à la fonction javascript et en l'utilisant pour rediriger vers la nouvelle URL.
L'idéal est d'ajouter une option vide sur le dessus, de sorte que la personne qui veut l'Alabama comme option fasse un choix une fois.
J'ai fait le script basé sur le nom visible comme vous l'avez montré dans la question.
<select onchange="my_function(event)">
<option value="">---</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<!-- ... list continues ... -->
</select>
function my_function(event) {
var options = event.target.options;
var selected = options[options.selectedIndex].text;
window.location.href = 'https://www.everlastingopportunities.com/' + selected + '/';
}
Copiez et collez le code de l'article ci-dessus pour obtenir le code complet et entrez les liens du site Web.
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="everlastingopportunities.com/Alabama/">Alabama (AL)</option>
<option value="(ENTER WEBSITE LINK HERE)">Alaska (AK)</option>
<option value="(ENTERWEBSITE LINK HERE)">Arizona (AZ)</option>
Utilisez-vous ASP.NET?
Nous avons d'abord besoin d'un peu plus d'informations de votre part. Vous avez besoin d'une instruction if pour prendre une décision en fonction de ce que vous choisissez, et cela ne se fait pas en HTML.
@Jay, j'ai obtenu ceci de freeformatter.com et copié et collé dans la boîte elementor css. La liste déroulante des états se trouve sur ma page d'accueil, mais lorsque je choisis un état, cela ne fait rien. Je ne suis pas sûr de ce que asp.net. Comment puis-je incorporer une instruction if? J'ai cherché sur Google mais je ne comprends pas. Je devrai peut-être l'enlever jusqu'à ce que quelqu'un fasse une vidéo sur youtube.
la liste semble correcte, mais il doit y avoir plus que cela, il doit y avoir une certaine logique quelque part pour que vous puissiez lui dire quoi faire lorsque vous cliquez. Voyons si nous pouvons comprendre cela, utilisez-vous Visual Studio?
Wordpress Je peux faire une capture d'écran, mais je ne pense pas pouvoir télécharger sur ce chat. Mais sous les options avancées, il l'a sur chaque page Web. Classes CSS ID CSS Z-Index
sous le contenu, il dit simplement "entrez le code" qui est le code que j'ai fourni ci-dessus, c'est ce que j'ai entré, ce qui m'a donné le menu déroulant. Sous les options avancées, il contient des classes z-index / css id / css mais j'ai essayé de l'ajouter au code d'état Visitez " rel = "nofollow noreferrer"> everlastingopportunities.com/georgia / "> Visitez everlastingopportunities.com! mais cela n'a pas fonctionné
Désolé, je ne connais pas Wordpress et je ne veux pas rendre les choses plus déroutantes, je vais donc me retirer. En guise de commentaire de départ, je dirai que je pense aux couches de type z-index sur la page, disons que vous avez 2 images et qu'elles essaient toutes les deux de prendre la même place sur votre page. Celui avec le z-index le plus élevé est celui que vous verrez.
@Jay Merci! Je vais simplement ajouter les états au menu principal pour le moment.
Ça fonctionne maintenant! Je suis juste revenu pour mettre la réponse juste au cas où quelqu'un d'autre aurait besoin de savoir.
Bon travail, je suis content que vous l'ayez ^ _ ^