JavaScript dépendante de la liste déroulante

Comment faire d'un dépendante de la liste déroulante avec JavaScript?

J'ai besoin de première catégorie de la liste pour déclencher d'autres 2 (ou plus) catégories de montrer aux listes qui dépend de ce qui a été votre sélection sur la première catégorie.

Est-ce possible?

Voici mon code :

<code> 

function dropdownlist(listindex)
 {

document.formname.category2.options.length = 0;
 switch (listindex)
 {

 case "Home Ware" :
 document.formname.category2.options[0]=new Option("Select Category2","");
 document.formname.category2.options[1]=new Option("Air-Conditioners/Coolers","Air-Conditioners/Coolers");
 document.formname.category2.options[2]=new Option("Audio/Video","Audio/Video");
 document.formname.category2.options[3]=new Option("Beddings","Beddings");
 document.formname.category2.options[4]=new Option("Camera","Camera");
 document.formname.category2.options[5]=new Option("Cell Phones","Cell Phones");

 break;

 case "Education" :
 document.formname.category2.options[0]=new Option("Select Category2","");
 document.formname.category2.options[1]=new Option("Colleges","Colleges");
 document.formname.category2.options[2]=new Option("Institutes","Institutes");
 document.formname.category2.options[3]=new Option("Schools","Schools");
 document.formname.category2.options[4]=new Option("Tuitions","Tuitions");
 document.formname.category2.options[5]=new Option("Universities","Universities");

 break;

 case "Books" :
 document.formname.category2.options[0]=new Option("Select Category2","");
 document.formname.category2.options[1]=new Option("College Books","College Books");
 document.formname.category2.options[2]=new Option("Engineering","Engineering");
 document.formname.category2.options[3]=new Option("Magazines","Magazines");
 document.formname.category2.options[4]=new Option("Medicine","Medicine");
 document.formname.category2.options[5]=new Option("References","References");

 break;

 }
 return true;
 }
</code>

Html :

    <form id="formname" name="formname" method="post" action="submitform.asp" >
 <table width="50%" border="0" cellspacing="0" cellpadding="5">
 <tr>
 <td width="41%" align="right" valign="middle">Category1 :</td>
 <td width="59%" align="left" valign="middle"><select name="category1" id="category1" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
 <option value="">Select Category1</option>
 <option value="Home Ware">Home Ware</option>
 <option value="Education">Education</option>
 <option value="Books">Books</option>
 </select></td>
 </tr>
 <tr>
 <td align="right" valign="middle">Category2 :
 </td>
 <td align="left" valign="middle"><script type="text/javascript" language="JavaScript">
 document.write('<select name="category2"><option value="">Select Category2</option></select>')
 </script>
 <noscript><select name="category2" id="category2" >
 <option value="">Select Category2</option>
 </select>
 </noscript></td>
 </tr>
 </table>

</form>

Je crois qu'il n'est pas possible de créer une troisième liste qui serait déclenché par le choix de "la Maison ware" et ont des choix différents?

Sûr que c'est possible. Fournissez-nous ce que vous avez fait jusqu'à présent...
Javascript tout est possible 😀 - EX. jsfiddle.net/v917ycp6
Frogmouth, est-il possible qu'il se montre 2 sous-catégories?
TIL. Vous venez de tought moi un nouveau truc.. je ne savais pas que c'était possible aussi avec les différents éléments dans une liste déroulante. Merci pour ça 😉
vous pouvez tout faire. Ce dont vous avez besoin?

OriginalL'auteur dummie | 2015-04-14

html javascript

Mise à JOUR 03/2018

Je l'examen de cette solution à cause d'une OP (thx @stavasknall) m'a dit que ma solution ne fonctionne pas dans Safari.

La question:

Dans certains navigateurs (comme Safari) le <option> à l'intérieur d'un <select> ne peut pas se cacher via CSS, si vous définissez (en css ou via Jquery) style="display:none" Safari simplement les ignorer.

Ma nouvelle solution

Pour cible les OP objectif est nécessaire pour manipuler le DOM pour changer le <option> à l'intérieur de e sélection, pour ce faire, il y a beaucoup de solution, j'suite de celui-ci:

HTML

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="home_ware">Home Ware</option>
<option value="education">Education</option>
<option value="books">Books</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category2</option>
<!-- Home Ware -->
<optgroup data-rel="home_ware">
<option value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
<option value="audio-video">Audio/Video</option>
<option value="beddings">Beddings</option>
<option value="camera">Camera</option>
<option value="cell-phones">Cell Phones</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="education">
<option value="Colleges">Colleges</option>
<option value="Institutes">Institutes</option>
<option value="Schools">Schools</option>
<option value="Tuitions">Tuitions</option>
<option value="Universities">Universities</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="books">
<option value="College Books">College Books</option>
<option value="Engineering">Engineering</option>
<option value="Magazines">Magazines</option>
<option value="Medicine">Medicine</option>
<option value="References">References</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category3 :</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category3" name="category3">
<option value>Select Category3</option>
<!-- Home Ware -->
<optgroup data-rel="home_ware">
<option value="foo1">category3 home ware 1</option>
<option value="foo2">category3 home ware 2</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="education">
<option value="foo3">category3 Education 1</option>
<option value="foo4">category3 Education 2</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="books">
<option value="foo5">category3 Books 1</option>
<option value="foo6">category3 Books 2</option>
</optgroup>
</select>
</td>
</tr>
</table>

Javascript

var $cat = $("#category1"),
$subcat = $(".subcat");
var optgroups = {};
$subcat.each(function(i,v){
var $e = $(v);
var _id = $e.attr("id");
optgroups[_id] = {};
$e.find("optgroup").each(function(){
var _r = $(this).data("rel");
$(this).find("option").addClass("is-dyn");
optgroups[_id][_r] = $(this).html();
});
});
$subcat.find("optgroup").remove();
var _lastRel;
$cat.on("change",function(){
var _rel = $(this).val();
if(_lastRel === _rel) return true;
_lastRel = _rel;
$subcat.find("option").attr("style","");
$subcat.val("");
$subcat.find(".is-dyn").remove();
if(!_rel) return $subcat.prop("disabled",true);
$subcat.each(function(){
var $el = $(this);
var _id = $el.attr("id");
$el.append(optgroups[_id][_rel]);
});
$subcat.prop("disabled",false);
});

Dans ce le script enregistrer le s html à l'intérieur d'un objet Javascript (basé sur <select> ID et <optgroup> data-rel) et de les retirer de la DOM. Avec cette solution lorsqu'un <select> modifier le script de trouver l'option et de l'imprimer dans le rapport <select>.

Comme dans d'autres solution aussi dans celui-ci, vous devez inclure jQuery et vous avez de l'envelopper le code Javascript à l'intérieur de DOMready listener ou à la fin de la <body>.

De travail exemple:

http://jsfiddle.net/v917ycp6/595

SOLUTION ORIGINALE

(non NAVIGATEUR CROIX - de ne pas travailler avec webkit)

J'ai changer votre HTML, JS, CSS de prévenir l'usage excessif de Javascript.

Première: Pensez à utiliser jQuery (une simple librairie JS qui vous aident à créer des complexes chose)
Pas créer/remvoe élément du DOM chaque fois que vous devez changer votre HTML au lieu de CACHER cet élément et de montrer à tous que vous nedd.

HTML

<form id="formname" name="formname" method="post" action="submitform.asp" >
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="home_ware">Home Ware</option>
<option value="education">Education</option>
<option value="books">Books</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" id="category2" name="category2">
<option class="label" value>Select Category2</option>
<!-- Home Ware -->
<option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
<option rel="home_ware" value="audio-video">Audio/Video</option>
<option rel="home_ware" value="beddings">Beddings</option>
<option rel="home_ware" value="camera">Camera</option>
<option rel="home_ware" value="cell-phones">Cell Phones</option>
<!-- Education -->
<option rel="education" value="Colleges">Colleges</option>
<option rel="education" value="Institutes">Institutes</option>
<option rel="education" value="Schools">Schools</option>
<option rel="education" value="Tuitions">Tuitions</option>
<option rel="education" value="Universities">Universities</option>
<!-- Books -->
<option rel="books" value="College Books">College Books</option>
<option rel="books" value="Engineering">Engineering</option>
<option rel="books" value="Magazines">Magazines</option>
<option rel="books" value="Medicine">Medicine</option>
<option rel="books" value="References">References</option>
</select>
</td>
</tr>
</table>
</form>

prendre un coup d'oeil: - je utiliser rel attribut de lien de catégorie et sous-catégorie (en minuscules et sans espace ou un caractère spécial):

<option rel="home_ware" value="">Select Category1</option>

CSS

#category2 option{
display:none;
}
#category2 option.label{
display:block;
}

cette CSS masquer la sous-catégorie options (pas d'étiquette), qui montrent que si la catégorie principale est seleceted.

JS (jQuery)

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script
<script>
$(function(){
//fisrt I store in 2 var the reference of two <select>
var $cat = $("#category1"),
$subcat = $("#category2");
//this is the same thing if you write in your HTML onChange="" in first <select>
$cat.on("change",function(){
//store the value of first select every time it change
var _rel = $(this).val();
//clean the second select (value and option active) to prevent bad link (cat1 with subcat of cat2)
$subcat.find("option").attr("style","");
$subcat.val("");
//if no option is selected i disable the second select
if(!_rel) return $subcat.prop("disabled",true);
//if a option si selected i show the option linked by rel attr
$subcat.find("[]").show();
$subcat.prop("disabled",false);
});
});
</script>

J'utilise jQuery raison est simple, propre, et vous écrire moins de code.
Jetez un oeil à la Documentation de jQuery: http://api.jquery.com/. Si vous ne les utilisez pas, vous devriez.

Ce resurce est nécessaire

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

De travail exemple:

http://jsfiddle.net/v917ycp6/5/

Modifier

Si vous avez besoin d'activer plusieurs <select> après vous cochez une option de category1 il vous suffit de changer le sélecteur de la variable $subcat pour sélectionner plus d'un <select>.

HTML

ajouter une classe .subcat à tous <select> vous devez activer lors de la sélection d' category1:

<select disabled="disabled" id="category2" name="category2">

devient:

<select disabled="disabled" id="category2" class="subcat" name="category2">

Maintenant, ajouter le nouveau <select> à votre code:

<select disabled="disabled" class="subcat" id="category3" name="category3">
<option value>Select Category3</option>
<!-- Home Ware -->
<option rel="home_ware" value="foo1">category3 home ware 1</option>
<option rel="home_ware" value="foo2">category3 home ware 2</option>
<!-- Education -->
<option rel="Education" value="foo3">category3 Education 1</option>
<option rel="Education" value="foo4">category3 Education 2</option>
<!-- Books -->
<option rel="Books" value="foo5">category3 Books 1</option>
<option rel="Books" value="foo6">category3 Books 2</option>

REMARQUE: <option> ont déjà rel

Javascript

$subcat = $("#category2"); devient $subcat = $(".subcat");

CSS

.subcat option{
display:none;
}
.subcat option.label{
display:block;
}

#category2 devient .subcat.

Cette mise en œuvre à généraliser le comportement de chaque select qui a de la classe subcat.

EXEMPLE

http://jsfiddle.net/v917ycp6/9/

Je ne suis pas anglais, et maintenant je n'ai pas le temps de corriger mes fautes de grammaire, désolé. 🙁 Mon Mauvais.

Merci, c'est super, avez-vous une idée de comment faire une 3ème catégorie, est également déclenchée par category1?
Prendre un coup d'oeil. - Je modifier ma réponse. 🙂
Que faire si l'une des valeurs dans la Catégorie 2 a été commun à plus de 1 catégorie 1 valeurs . Par exemple : si "Audio/Vidéo" dans la Catégorie 2 a été dépendante de la valeur pour les "articles ménagers" et "Éducation" ? Comment cela peut-il être atteint ?
Vous avez une solution élégante, mais votre dernière Violon ne fonctionne pas dans Apple Safari. Avez-vous une solution pour cela?
cela semble fonctionner! Merci beaucoup!

OriginalL'auteur Frogmouth

Exemple de base (javascript, pas de jQuery):

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<select onChange="jsFunction()" id="selectOpt1">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
</select>
<select id="selectOpt2">
<option value="1">FIRST</option>
</select>
<select id="selectOpt3">
<option value="1">FIRST</option>
</select>
<script>
function jsFunction(){
var list1 = document.getElementById("selectOpt1");
var myselect = list1.options[list1.selectedIndex].value;
var list2 = document.getElementById('selectOpt2');
var list3 = document.getElementById('selectOpt3');
for (i = 0; i < list2.options.length; i++) {
list2.options[i] = null;
}
for (i = 0; i < list3.options.length; i++) {
list3.options[i] = null;
}
if(myselect==="1"){
var opt = document.createElement('option');
opt.value = "1";
opt.innerHTML = "FIRST";
list2.appendChild(opt);
opt = document.createElement('option');
opt.value = "1";
opt.innerHTML = "FIRST2";
list3.appendChild(opt);
}
else{
var opt = document.createElement('option');
opt.value = "2";
opt.innerHTML = "SECOND";
list2.appendChild(opt);
opt = document.createElement('option');
opt.value = "1";
opt.innerHTML = "SECOND2";
list3.appendChild(opt);
}
}
</script>
</body>
</html>

Pourriez-vous aussi s'il vous plaît ajouter du code html? Im juste de commencer dans JScript...
Quelque chose de similaire, mais est-il possible de faire que lorsque vous sélectionnez "1", il montrerait deux cases avec le "PREMIER" et "FIRST2".
Et même avec "2"
Vérifier édité code, le code n'est pas agréable, mais ça fonctionne
Thats it! Merci beaucoup 🙂

OriginalL'auteur user4341206

Vous devez vous connecter pour publier un commentaire.