Dynamic addClass() from selectbox

Question

J'espère qu'il ne s'agit pas d'une question répétitive, mais si c'est le cas, postez simplement le lien dans votre réponse.

J'ai besoin de créer un site Web avec une liste déroulante de sélection en haut avec quelques options, et plusieurs divs en dessous avec plusieurs liens.

Selon l'option que vous sélectionnez dans la boîte de sélection, les liens étiquetés de manière appropriée seront mis en évidence.

Voici la structure de base :

<select>
  <option value="o1">Option 1</option>
  <option value="o2">Option 2</option>
  <option value="o3">Option 3</option>
  <option value="o4">Option 4</option>
</select> 

<div>
  <a href="#" class="o1">Link A</a>
  <a href="#" class="o2">Link B</a>
  <a href="#" class="o3">Link C</a>
  <a href="#" class="o4">Link D</a>
</div>

<div>
   <a href="#" class="o1">Link A</a>
   <a href="#" class="o2">Link B</a>
   <a href="#" class="o3">Link C</a>
   <a href="#" class="o4">Link D</a>
</div>

Je sais que ce processus comprendra les fonctions .addClass() .removeClass() et .change(), mais je ne sais pas comment assembler le tout pour qu'il fonctionne de manière dynamique sur toutes les divisions.

Merci d'avance.

Answer 1

Lien donc :

$('select').on('change', function(){
    var klass = this.value;
    $('.highlight').removeClass('highlight');
    $('a.'+klass).addClass('highlight');
});

Answer 2

$('select').on('change', function() {      // binding change event for select
                                           // fires when select box change

  var mycls = this.value;                  // getting the value of select 
                                           // box after change

  $('a:not(".'+ mycls +'")')               // select <a> tag that has no 
                                           // class same as select box value
              .removeClass('some_class');  // and remove highlight 
                                           // class form that <a>

  $('a.' + mycls)                          // select the <a> with class 
                                           // same as select box value
             .addClass('some_class');      // and adding highlight class
});

Pour qu'un lien soit initialement mis en évidence, il suffit de déclencher un changement initial.

$('select').on('change', function() {
  var mycls = this.value;
  $('a:not(".'+ mycls +'")').removeClass('some_class');
  $('a.' + mycls).addClass('some_class');
}).change(); // here the initial change event triggered

DEMO

Answer 3

Il semble que vous ayez déjà répondu à la question dans la dernière phrase, mais voici l'étape suivante.

Vous devez ajouter le gestionnaire d'événement .change() à votre boîte de sélection.

$("select").change(function () {

});

Ensuite, lorsque cela se produit, lisez la valeur sélectionnée et, puisque vous leur avez donné le même nom, appliquez le style à cette classe.

$("select").change(function () {
    $( "." + $(this).attr("value") ).css("background", "#ccc");
}

Answer 4

En supposant que vous ayez donné un identifiant à la liste de sélection, par exemple selectid et que vous disposiez d'une classe appelée .highlight, vous pourriez faire quelque chose comme ça :

$('#selectid').change(function(){

  $('*').removeClass('highlight');

  $('.'+$(this).val()).addClass('highlight'); 

});

Je n'ai pas testé ce qui précède mais cela devrait vous mettre sur la bonne voie.