- html balises
Sélectionnez la zone de liste déroulante sélectionnez l'étiquette est
< Select id = "ville" multiple = "multiple" onchange = "DoChange ()" nom = "ville" type = » width: 300px; " > < option de valeur =" 1" >上海</ option de > < option de valeur = "2" >北京</ option de > < option de valeur = "3" >广州</ optgroup > </ sélectionner >
attributs spéciaux communs: multiple = « multiple »: Set boîte déroulante à plusieurs menu déroulant sélection
- Dom mis en œuvre
Il est atteint par le HTMLSelectElement
propriétés uniques et méthodes;
- ; Add (newOption, relOption) inséré avant nouvelle option, dans laquelle la position de la relOption spécifiée
- multiples: valeur Boolen, si le nombre d'options offertes, ce qui équivaut à plusieurs attributs en HTML
- Options: HTMLCollection toutes <option> dans les commandes , IE8 et retourner les résultats des versions suivantes non seulement l'ensemble des options, en tenant compte de la compatibilité n'est pas recommandé
- supprimer (index), supprime les options de localisation spécifiées:
- selectedIndex: 0 index de base de l'élément sélectionné n'a pas été sélectionné comme -1;
- Taille: Sélectionnez le nombre de lignes visibles dans la boîte.
- valeur: la valeur de l'élément sélectionné: point non sélectionné: la valeur est une chaîne vide; un seul élément sélectionné valeur caractéristique si la valeur spécifiée est égale à la valeur de l'attribut de valeur de l'élément sélectionné. Si la valeur caractéristique ne soit pas spécifiée, la valeur est égale à la valeur du texte {IE} retourne une chaîne vide à une pluralité de sélection: prendre la première valeur de l'élément sélectionné. (Non recommandé, la compatibilité n'est pas bon)
méthodes DOM résumé couramment utilisés
Options claires: select.options.length = 0;
Ajout d'options de (nouvelle option (texte, valeur));
Supprimer l'option: select.options.removeChild (optionItem) ou select.options.remove (optionindex);
Désactivez la case déroulante: select.setAttribute ( « désactivé », « désactivé »);
La boîte déroulante: select.removeAttribute ( « désactivé »);
Options de réglage: select.options [1] .selected = "selected"; // option s'il y a plusieurs options, n'efface pas avant
select.selectIndex = 1 // Si les options avant plusieurs options, il est effacé.
Paquet suit comme:
var selectUtil = ( fonction () { option de chargement dynamique fonction initDate (E, SEL) { // Effacer l' option Selet sel.options.length = 0; // Dom option claire pour ( var OP dans Options) { le console.log (options [OP] .value_str); var OP = new new Option- (options [OP] .text_str, options [OP] .value_str); sel.options.add (OP); } } // définir la valeur sélectionnée - non la propriété sélectionnée en utilisant décocher la valeur précédente sera fonctionner setSelectValue (valeur) { var options = document.getElementById ( "City" ) .children, pour ( var article dans Options) { IF (options [article] .Value == valeur) { options [article] .selected = "Sélectionné" ; PAUSE ; } } } // définir la valeur sélectionnée avant utilisation --- élément de propriété selectedIndex désélectionne fonction setSelectIndex (VALUE1) { var Ville = document.getElementById ( "City" ), pour ( varPoint de city.children) { IF (city.children [article] == .Value VALUE1) { city.selectedIndex = Point; PAUSE ; } } } // Retourne le cycle d'acquisition de valeur sélectionnée, ne pas utiliser cette option de cycle: parce que la version basse attribut contient non seulement les options de menu déroulant fonction du getSelected () { var Ville = document.getElementById ( "City" ); var selItem = new new Array (); pour ( var article dans city.children) { Si (city.children [élément] .selected) { selItem.push (city.children [élément] .Value); } } Retourner selItem; } Fonction Dödel (valeur1) { var ville = document.getElementById ( "ville" ); pour ( var article dans city.children) { si (city.children [point] .value == valeur1) { // city.removeChild (city.children [point]); 或者 city.remove (objet); Pause ; } } } retour { initDate: initDate, // chargement dynamique SELECT setSelectValue: setSelectValue, // Définir la valeur sélectionnée des options de propriété sélectionnés setSelectIndex: setSelectIndex, // définir la zone de sélection déroulante est cochée, la valeur selectIndex forme de réalisation getSelectValue: le getSelected, // Get avec choisi Dodel: Dodel } }) (); // désactiver et activer la zone de sélection var Ville = document.getElementById ( "City" ), IF (city.hasAttribute ( "désactivé" )) { city.removeAttribute ( "désactivé" ); ce .value = "禁用下拉框" ; } Autre { city.setAttribute ( "désactivé", "désactivé" ); ce .value = "启用下拉框" ; } }
- opération jquery
val () + "'] ") prop (" sélectionné",. true ); //
L'élément sélectionné n'efface pas le jqeury d' origine est définie sur true }) // obtenir la valeur sélectionnée $ (The Click ( "# de getselect"). Fonction {() // retourne un tableau d'options collection $ ( "# text_select"). Val ($ ( "# City" ) .val ()); }) $ ( . "#doDisabled") Click ( fonction () { IF (. $ ( "# City") attr ( "Désactivé" )) { $ ( "#city") removeAttr ( "Désactivé". ); } else { $ ( attr ( "Désactivé", "Désactivé" "#city".) ); } }) })
- événement
changer: Lorsque la valeur de l'option change déclencheur