Remplir une liste déroulante basée sur la sélection dans un autre

J'ai besoin de changer le contenu de la liste déroulante de B en fonction de la sélection dans Une liste déroulante à l'aide de javascript. Il n'y a pas les requêtes db impliqué, je sais d'avance ce que le contenu de B devrait avoir le choix en A. j'ai trouvé quelques exemples d'utilisation de l'AJAX, mais depuis il n'y a pas de db de la requête en cause qui n'est pas nécessaire. Quelqu'un peut-il m'indiquer un exemple de code pour savoir comment faire cela?

InformationsquelleAutor Steve | 2011-04-16
  1. 44

    JS:

    function configureDropDownLists(ddl1, ddl2) {
  var colours = ['Black', 'White', 'Blue'];
  var shapes = ['Square', 'Circle', 'Triangle'];
  var names = ['John', 'David', 'Sarah'];

  switch (ddl1.value) {
    case 'Colours':
      ddl2.options.length = 0;
      for (i = 0; i < colours.length; i++) {
        createOption(ddl2, colours[i], colours[i]);
      }
      break;
    case 'Shapes':
      ddl2.options.length = 0;
      for (i = 0; i < shapes.length; i++) {
        createOption(ddl2, shapes[i], shapes[i]);
      }
      break;
    case 'Names':
      ddl2.options.length = 0;
      for (i = 0; i < names.length; i++) {
        createOption(ddl2, names[i], names[i]);
      }
      break;
    default:
      ddl2.options.length = 0;
      break;
  }

}

function createOption(ddl, text, value) {
  var opt = document.createElement('option');
  opt.value = value;
  opt.text = text;
  ddl.options.add(opt);
}

    HTML:

    <select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
  <option value=""></option>
  <option value="Colours">Colours</option>
  <option value="Shapes">Shapes</option>
  <option value="Names">Names</option>
</select>

<select id="ddl2">
</select>

    • Cela peut être en retard mais je cherchais un extrait de code pour mes listes déroulantes et vous fourni un excellent exemple de travail. Merci! +1
    • J'ai essayé ce sur jsfiddle jsfiddle.net/e6hzj8gx. Il ne semble pas travailler?
    • La question a été onLoad a été sélectionné, lorsque la fonction doit être lié ailleurs, par exemple no wrap - in <head>. Aussi pour certaines raisons, j'ai d'abord écrit pour parcourir l'arborescence DOM chaque fois qu'il a besoin d'accéder ddl qui semble inutile. J'ai donc mis à jour pour passer à l'élément de référence, pas l'ID. Voir: jsfiddle.net/e6hzj8gx/4
    • oh.. super.. merci.. +1 pour ça.: D
    • J'ai toujours un frisson quand je vois var colours = new Array('Black', 'White', 'Blue'); Simplement var colours = ['Black', 'White', 'Blue']; est tout ce dont vous avez besoin.
    • J'ai besoin de le faire, mais les valeurs de l'option doit être récupérée à partir de la base de données, Comment puis-je le faire?
    • Le moyen le plus efficace jamais. Aussi il est posible d'utiliser bidimensionals tableaux pour la <option value= "valeur" >Description</option> .

    InformationsquelleAutor PunkyGuy
  2. 10

    De l'installation de la mine à l'intérieur de la fermeture et à droite JavaScript, des explications fournies dans les commentaires

    JS:

    (function() {

  //setup an object fully of arrays
  //alternativly it could be something like
  //{"yes":[{value:sweet, text:Sweet}.....]}
  //so you could set the label of the option tag something different than the name
  var bOptions = {
    "yes": ["sweet", "wohoo", "yay"],
    "no": ["you suck!", "common son"]
  };

  var A = document.getElementById('A');
  var B = document.getElementById('B');

  //on change is a good event for this because you are guarenteed the value is different
  A.onchange = function() {
    //clear out B
    B.length = 0;
    //get the selected value from A
    var _val = this.options[this.selectedIndex].value;
    //loop through bOption at the selected value
    for (var i in bOptions[_val]) {
      //create option tag
      var op = document.createElement('option');
      //set its value
      op.value = bOptions[_val][i];
      //set the display label
      op.text = bOptions[_val][i];
      //append it to B
      B.appendChild(op);
    }
  };
  //fire this to update B on load
  A.onchange();

})();

    HTML:

    <select id='A' name='A'>
  <option value='yes' selected='selected'>yes
  <option value='no'> no
</select>
<select id='B' name='B'>
</select>

    InformationsquelleAutor locrizak
  3. 8

    Pourriez vous s'il vous plaît jeter un oeil à: http://jsfiddle.net/4Zw3M/1/.

    Fondamentalement, les données sont stockées dans un Tableau et les options sont ajoutées en conséquence. Je pense que le code dit plus que mille mots.

    var data = [ //The data
    ['ten', [
        'eleven','twelve'
    ]],
    ['twenty', [
        'twentyone', 'twentytwo'
    ]]
];

$a = $('#a'); //The dropdowns
$b = $('#b');

for(var i = 0; i < data.length; i++) {
    var first = data[i][0];
    $a.append($("<option>"). //Add options
       attr("value",first).
       data("sel", i).
       text(first));
}

$a.change(function() {
    var index = $(this).children('option:selected').data('sel');
    var second = data[index][1]; //The second-choice data

    $b.html(''); //Clear existing options in second dropdown

    for(var j = 0; j < second.length; j++) {
        $b.append($("<option>"). //Add options
           attr("value",second[j]).
           data("sel", j).
           text(second[j]));
    }
}).change(); //Trigger once to add options at load of first choice
    • Je ne veux pas vous déranger, mais pourriez-vous s'il vous plaît accepter cette réponse si c'est celle qui vous a aidé?
    InformationsquelleAutor pimvdb