Données Javascript sur la page

J'ai une page web avec 2 listboxes (HTML select control). La première zone de liste est multi-select et contient un grand nombre d'éléments.Données Javascript sur la page

Lorsque je sélectionne un ou plusieurs éléments dans la première zone de liste, le contenu de la deuxième zone de liste doit changer en fonction des valeurs sélectionnées. Ces valeurs doivent être extraites de la base de données. Parce que la sélection doit fonctionner instantanément, je dois tout faire du côté client sans callback/postback. Cela implique d'injecter le contenu de la base de données lors du chargement de la page et de le traiter avec JQuery.

Quelle approche suggérez-vous pour stocker ces données dans la page? Pouvez-vous me signaler une solution existante?

Je ne sais même pas comment Google ceci.

Source

2010-09-03 Germstorm

Il n'a pas à charger initialement tout le contenu mais seulement à la demande. –

Malheureusement pas. Ça doit être Javascript – Germstorm

Je voudrais créer un objet qui contient les différents éléments dans des tableaux. Exemple:

var values = { 
    cat1: ["item1", "item2", ...], 
    cat2: ["item1", "item2", ...] 
}

Chaque fois qu'un élément est sélectionné dans la première select, regardez cette valeur avec values[selectedValue] qui vous donne les éléments pour l'autre boîte select. Ensuite, il suffit de générer le code HTML pour cela. Vous ne pouvez pas utiliser la technique AJAX?

Source

2010-09-03 08:08:55

Vous devez jQuery pour récupérer les données lors d'un clic.

Peut-être que ce guide vous aidera à:
http://www.akchauhan.com/select-content-from-one-list-to-another-using-jquery/

Renseignez-vous sur jQuery ici: http://docs.jquery.com/Tutorials

Source

2010-09-03 08:08:54 Steven

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    // Simple plugin that compares two arrays 
    jQuery.fn.compare = function(t) { 
     if (this.length != t.length) { 
      return false; 
     } 
     var a = this.sort(), 
      b = t.sort(); 
     for (var i = 0; t[i]; i++) { 
      if (a[i] !== b[i]) { 
       return false; 
      } 
     } 
     return true; 
    }; 


    // Those rules should be fetched from the server 
    var rules = [ 
     // select the first value if 1, 2 and 5 are selected 
     { value: '1', selectedValues: [ '1', '2', '5' ] }, 
     // select the second value if 2 and 4 are selected 
     { value: '2', selectedValues: [ '2', '4' ] }, 
     // select the third value if 3 is selected 
     { value: '3', selectedValues: [ '3' ] } 
    ]; 

    $(function() { 
     // whenever the selection in the multiselect box changes: 
     $('#first').change(function() { 
      // get the array of all selected elements 
      var selectedValues = $(this).val(); 

      // verify if this array matches any of the defined rules 
      $(rules).each(function(index, rule) { 
       if ($(selectedValues).compare(rule.selectedValues)) { 
        // if we have a match select the corresponding value in the second list 
        $('#second').val(rule.value); 
       } 
      }) 
     }); 
    }); 
    </script> 

</head> 
<body> 

<select multiple="multiple" id="first"> 
    <option value="1">value1</option> 
    <option value="2">value2</option> 
    <option value="3">value3</option> 
    <option value="4">value4</option> 
    <option value="5">value5</option> 
</select> 

<select id="second"> 
    <option value="1">value1</option> 
    <option value="2">value2</option> 
    <option value="3">value3</option> 
</select> 

</body> 
</html>

Source

2010-09-03 08:15:35

Données Javascript sur la page

Répondre

Questions connexes