Listes de sélection

by Bruno G.

HTML

<select name="source">
  <option value="en" selected>Anglais</option>
  <option value="fr">Français</option>
</select>
==>
<select name="target">
  <option value="en">Anglais</option>
  <option value="fr" selected>Français</option>
</select>
<br>
<select name="sites" size="4">
  <option value="" data-langs="en-fr,fr-en">Both ways</option>
  <option value="" data-langs="en-fr">EN->FR</option>
  <option value="" data-langs="fr-en" style="display:none">FR-EN</option>
  <option value="" data-langs="en-fr">EN->FR 2</option>
  <option value="" data-langs="fr-en" style="display:none">FR-EN 2</option>
</select>

JavaScript

$('select').on('change', function(){
	// Change l'autre liste
	var newVal = $(this).val(),
  		otherVal = (newVal === 'fr') ? 'en' : 'fr';
  $('select[name=' + ( $(this).attr('name') === 'source' ? 'target' : 'source' ) + ']').val(otherVal);
  
  //Filtre les sources
  var dir = $('select[name=source]').val() + '-' + $('select[name=target]').val();
  $('select[name=sites] option').show().each(function(){
  	var t = $(this);
    if (!t.data('langs').includes(dir)) {
    	t.hide();
    }
  });
});