Soumis par dgrota le ven 08/03/2019 - 16:47

Convertir des liens en liste de sélection déroulante (javascript)

Pour les listes de liens de délibérations par exemple, il est possible d'insérer un code javascript qui permet de convertir chaque lien en élément d'une liste déroulante.

exemple : http://www.portalgen.clavelin.eu/deliberations-multi-selecteur

Dans cette liste il suffit de créer un lien sur année... ayant pour url un tiret "-" pour créer un séparateur et générer une nouvelle liste déroulante.

Ci-dessous le code javascript permettant cette fonctionalité (il suffit de l'ajouter en fin de page en mode édition outil>code source de la page concernée)

 

 

<script>// <![CDATA[
$('document').ready(function(){

    var selecteur='<div class="select"><select class="selecteur"><option value="">Seclectionner le document que vous souhaitez consulter</option>';
 var paspremier=0;
$('#paragraphe .txt_bloc a').each( function(){

     if ($(this).attr("href").substr(-1, 1)=="-"){

          if (paspremier==1){
selecteur=selecteur + '</select><br/><br/></div>'+'<div>'+$(this).text()+'</div><div class="select"><select class="selecteur"><option value="">Seclectionner le document que vous souhaitez consulter</option>';

          }else{
          
  selecteur='<div>'+$(this).text()+'</div>'+selecteur;
        paspremier=1;
          }
     }else{
      selecteur=selecteur + '<option value="' + $(this).attr("href") + '">' + $(this).text() + '</option>';

      }

} );
    selecteur=selecteur + '</select><br/><br/></div>'
        $('#paragraphe .txt_bloc a').remove();
    $('#paragraphe .txt_bloc').append(selecteur);
 });
 
$(function(){
      // bind change event to select
      $('.selecteur').on('change', function () {
          var url = $(this).val();
    if ($("#iframetemporaire")){
        $("#iframetemporaire").remove();
    }
          if (url!="") {
        var ifr='<iframe id="iframetemporaire" src="'+url+'" width="100%" height="1000px"></iframe>';
        $(this).parent().append(ifr);
          }

   });
});
// ]]></script>
</p>