1

I have an issue with my array in JS, (and of course i'm learning JS, I'm really bad for the moment.)

The fact is my select is printing my array values where the value of the select is equal to either 'mobile' and 'desktop'

Here is my main problem : I want to add a new value to print them all ! I tried to add a bidimensionnal array for every value but since I'm just bad with JS, I did not managed to do it.

Here is my JS :

function afficher_lst_appareils() {

  // On supprime tous les appareils de la liste déroulante
  $('#lst_appareils').empty().prepend("<option value='0'>Sélectionnez un type d'appareil</option>");

  // Le type d'appareil / système qu'on a sélectionné
  var type_appareil = $('#lst_types_appareils').val();

  var lst_appareils_assoc = {

    'Windows 10'                    : 'desktop',
    'Windows 8.1'                   : 'desktop',
    'Windows 8'                     : 'desktop',
    'Windows 7'                     : 'desktop',
    'Windows Server 2003/XP x64'    : 'desktop',
    'Windows XP'                    : 'desktop',
    'Windows 2000'                  : 'desktop',
    'Windows ME'                    : 'desktop',
    'Windows 98'                    : 'desktop',
    'Windows 95'                    : 'desktop',
    'Windows 3.11'                  : 'desktop',
    'Windows Vista'                 : 'desktop',
    'Linux'                         : 'desktop',
    'Ubuntu'                        : 'desktop',

    'Mac OS X'                      : 'mobile',
    'Mac OS 9'                      : 'mobile',
    'iPhone'                        : 'mobile',
    'Android'                       : 'mobile',
    'iPod'                          : 'mobile',
    'iPad'                          : 'mobile',
    'BlackBerry'                    : 'mobile',
    'Mobile'                        : 'mobile'

  };


  // On parcourt le tableau représentant l'ensemble des OS / appareils
  $.each(lst_appareils_assoc, function(key, value) {

    // Si le type de système / appareil correspond à celui sélectionné et s'il est présent en base, 
    // on prend sa clé (le nom du système / de l'appareil)
    if (type_appareil === value && jQuery.inArray(key, arr) !== -1) {

      // Si le nom de l'OS (correspondant à la clé) correspond avec celui soumis au formulaire,
      // on le pré-sélectionne grâce à l'attribut selected
      if (nom_os !== 0 && nom_os === key) {

        $('#lst_appareils').append('<option value="' + key + '" selected>' + key + '</option>');
        $("#lst_appareils option:eq(0)").text('-');
        //$('#zone_lst_appareils').show();
      } else { // Sinon on rajoute les autres normalement

        $('#lst_appareils').append('<option value="' + key + '" >' + key + '</option>');
        $("#lst_appareils option:eq(0)").text('-');
        //$('#zone_lst_appareils').show();
      }
    }
  });
}

// On l'appelle par défaut
afficher_lst_appareils();

// Gestion de l'affichage des appareils selon le type d'appareil sélectionné
$('#lst_types_appareils').on('change', function() {

  afficher_lst_appareils();
  var nom_os = 0;
});

Thanks !

(Here is my HTML in case..)

<div class="form-group">

  <label class='col-xs-4 col-md-2 col-lg-2 control-label'>Type d'appareil :</label>

  <div class='col-xs-8 col-sm-8 col-md-4 col-lg-4'>

    <select name='lst_types_appareils' id="lst_types_appareils" class='form-control'>
      <option value='tous' <?php if( isset( $valeurs_form[ 'lst_types_appareils'] ) && $valeurs_form[ 'lst_types_appareils']==='' ) echo 'selected'; ?> >Tous</option>
      <option value='desktop' <?php if( isset( $valeurs_form[ 'lst_types_appareils'] ) && $valeurs_form[ 'lst_types_appareils']==='desktop' ) echo 'selected'; ?>>Desktop</option>
      <option value='mobile' <?php if( isset( $valeurs_form[ 'lst_types_appareils'] ) && $valeurs_form[ 'lst_types_appareils']==='mobile' ) echo 'selected'; ?> >Mobile</option>
    </select>

  </div>

  <div id='zone_lst_appareils'>

    <label class='col-xs-4 col-md-2 col-lg-2 control-label' for='lst_appareils'>Liste des systèmes :</label>

    <div class='col-xs-8 col-sm-8 col-md-4 col-lg-4'>
      <select name='lst_appareils' id="lst_appareils" class='form-control'>
        <option value="0">Sélectionnez un type d'appareil</option>
      </select>
    </div>
  </div>

</div>

I let the french commentaries, in case you want to translate it, just tell me.

Oh and I forgot to tell that the 2nd select is supposed to print in function of 1st select value.

2
  • please use a fiddle Commented Dec 29, 2016 at 10:58
  • The code is incomplete... where are arr and nom_os defined? Commented Dec 29, 2016 at 11:18

2 Answers 2

1

The simplest way to get the type of device (mobile or desktop) based on a selction, is this:

  var lst_appareils_assoc = {

    'Windows 10'                    : 'desktop',
    'Windows 8.1'                   : 'desktop',
    'Windows 8'                     : 'desktop',
    'Windows 7'                     : 'desktop',
    'Windows Server 2003/XP x64'    : 'desktop',
    'Windows XP'                    : 'desktop',
    'Windows 2000'                  : 'desktop',
    'Windows ME'                    : 'desktop',
    'Windows 98'                    : 'desktop',
    'Windows 95'                    : 'desktop',
    'Windows 3.11'                  : 'desktop',
    'Windows Vista'                 : 'desktop',
    'Linux'                         : 'desktop',
    'Ubuntu'                        : 'desktop',

    'Mac OS X'                      : 'mobile',
    'Mac OS 9'                      : 'mobile',
    'iPhone'                        : 'mobile',
    'Android'                       : 'mobile',
    'iPod'                          : 'mobile',
    'iPad'                          : 'mobile',
    'BlackBerry'                    : 'mobile',
    'Mobile'                        : 'mobile'

  };

var selection = 'Windows 10';

var result = lst_appareils_assoc[selection];

alert(result);

By passing the string 'Windows 10' (or any of the others) in the square brackets, it will look up the value without needing to loop around every item. This makes it work like a simple dictionary.

Sign up to request clarification or add additional context in comments.

Comments

0

It's was in fact easy, thanks to @Sohnee, I managed to figure out which value I had

I did replaced my previous array by 3 differents arrays and it works !

    var e = document.getElementById("lst_types_appareils");
    var strUser = e.options[e.selectedIndex].value;


    if(strUser === 'desktop'){
        var lst_appareils_assoc = {

            'Windows 10'                    : 'desktop',
            'Windows 8.1'                   : 'desktop',
            'Windows 8'                     : 'desktop',
            'Windows 7'                     : 'desktop',
            'Windows Server 2003/XP x64'    : 'desktop',
            'Windows XP'                    : 'desktop',
            'Windows 2000'                  : 'desktop',
            'Windows ME'                    : 'desktop',
            'Windows 98'                    : 'desktop',
            'Windows 95'                    : 'desktop',
            'Windows 3.11'                  : 'desktop',
            'Windows Vista'                 : 'desktop',
            'Linux'                         : 'desktop',
            'Ubuntu'                        : 'desktop'


        };
    }
    else if(strUser === 'mobile'){

        var lst_appareils_assoc = {

            'Mac OS X'                      : 'mobile',
            'Mac OS 9'                      : 'mobile',
            'iPhone'                        : 'mobile',
            'Android'                       : 'mobile',
            'iPod'                          : 'mobile',
            'iPad'                          : 'mobile',
            'BlackBerry'                    : 'mobile',
            'Mobile'                        : 'mobile'

        };
    }
    else if(strUser === 'tous'){

       var lst_appareils_assoc = {

            'Windows 10'                    : 'tous',
            'Windows 8.1'                   : 'tous',
            'Windows 8'                     : 'tous',
            'Windows 7'                     : 'tous',
            'Windows Server 2003/XP x64'    : 'tous',
            'Windows XP'                    : 'tous',
            'Windows 2000'                  : 'tous',
            'Windows ME'                    : 'tous',
            'Windows 98'                    : 'tous',
            'Windows 95'                    : 'tous',
            'Windows 3.11'                  : 'tous',
            'Windows Vista'                 : 'tous',
            'Linux'                         : 'tous',
            'Ubuntu'                        : 'tous',

            'Mac OS X'                      : 'tous',
            'Mac OS 9'                      : 'tous',
            'iPhone'                        : 'tous',
            'Android'                       : 'tous',
            'iPod'                          : 'tous',
            'iPad'                          : 'tous',
            'BlackBerry'                    : 'tous',
            'Mobile'                        : 'tous'

        }; 

    }

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.