sélectionner des éléments de formulaire DOM JavaScript de

• 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; 

1.    ; Add (newOption, relOption) inséré avant nouvelle option, dans laquelle la position de la relOption spécifiée
2.    multiples: valeur Boolen, si le nombre d'options offertes, ce qui équivaut à plusieurs attributs en HTML
3.    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é 
4.    supprimer (index), supprime les options de localisation spécifiées:
5.     selectedIndex: 0 index de base de l'élément sélectionné n'a pas été sélectionné comme -1;
6.    Taille: Sélectionnez le nombre de lignes visibles dans la boîte.
7.    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