web-dev-qa-db-fra.com

Rediriger sur l'option de sélection dans la zone de sélection

En ce moment, j'utilise ceci:

<select ONCHANGE="location = this.options[this.selectedIndex].value;">

il me redirige sur l'emplacement à l'intérieur de la valeur d'option. Mais cela ne fonctionne pas comme prévu .. cela signifie que si je clique sur la première option de l’action select, l’action onChange ne fonctionne pas. Je pensais à javascript, mais je pense que vous aurez de meilleures suggestions les gars. Alors, comment puis-je le faire fonctionner si je clique sur chaque option cela me redirigera vers sa valeur?

htmlactiononchange
29
Lucas

Étant donné que la première option est déjà sélectionnée, l'événement change n'est jamais déclenché. Ajoutez une valeur vide en premier et vérifiez s'il est vide dans l'attribution d'emplacement.

Voici un exemple:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

Et voici le violon: http://jsfiddle.net/bL5sq/

88
margusholland

Je suggérerais fortement de ne plus utiliser JavaScript en ligne, mais plutôt:

function redirect(goto){
    var conf = confirm("Are you sure you want to go elswhere?");
    if (conf && goto != '') {
        window.location = goto;
    }
}

var selectEl = document.getElementById('redirectSelect');

selectEl.onchange = function(){
    var goto = this.value;
    redirect(goto);

};

Démo de JS Fiddle (victime de 404 linkrot) .
Démo de JS Fiddle via Wayback Machine .
Forked JS Fiddle pour les utilisateurs actuels .

Dans la balise du JS Fiddle, la première option n'a pas de valeur assignée. Un clic dessus ne devrait donc pas inciter la fonction à faire quoi que ce soit, et comme c'est la valeur par défaut, il suffit de cliquer sur select, puis de sélectionner le premier par défaut option ne déclenchera de toute façon pas l'événement change. 

Mettre à jour:
Dans le dernier exemple (2017-08-09), les URL de redirection devaient être permutées en raison d'erreurs relatives au contenu mixte entre JS Fiddle et les deux domaines, ainsi que pour les deux domaines nécessitant le même contenu pour le contenu encadré. - Albert

17
David Thomas

faire comme fonction de réutilisation globale en utilisant jquery

HTML

<select class="select_location">
   <option value="http://localhost.com/app/page1.html">Page 1</option>
   <option value="http://localhost.com/app/page2.html">Page 2</option>
   <option value="http://localhost.com/app/page3.html">Page 3</option>
</select>

Javascript en utilisant jquery

$('.select_location').on('change', function(){
   window.location = $(this).val();
});

vous pourrez maintenant réutiliser cette fonction en ajoutant la classe .select_location à n’importe quelle classe d’élément Select

1
Somwang Souksavatd
    {{-- dynamic select/dropdown --}}
    <select class="form-control m-bot15" name="district_id" 
        onchange ="location = this.options[this.selectedIndex].value;"
        >
          <option value="">--Select--</option>
          <option value="?">All</option>

            @foreach($location as $district)
                <option  value="?district_id={{ $district->district_id }}" >
                  {{ $district->district }}
                </option> 
            @endforeach   

    </select>
0
Saifur Rahman

Cela peut être archivé en ajoutant du code sur l'événement onchange du contrôle de sélection.

Par exemple:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value=""></option>
    <option value="http://google.com">Google</option>
    <option value="http://gmail.com">Gmail</option>
    <option value="http://youtube.com">Youtube</option>
</select>
0
Codemaker

Pour quelqu'un qui ne veut pas utiliser JS en ligne.

<select data-select-name>
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        document.querySelector('select[data-select-name]').onchange=changeEventHandler;
    },false);

    function changeEventHandler(event) {
        window.location.href = this.options[this.selectedIndex].value;
    }
</script>
0
Yuriy Kots