2017-09-29 12 views
1

J'ai écrit une balise select (ont sélectionné par défaut) et prendre la valeur de l'option pour déclencher une autre fonction js:Comment déclencher toujours fonction de <select> tag

var selectElement = document.getElementById("sel"); 
 

 
function somefunction() { 
 
    console.log(selectElement.value); 
 
};
<select id="sel" onchange='somefunction()'> 
 
    <option selected="selected" value='yes'>Yes</option> 
 
    <option value='no'>No</option> 
 
    <option value='all'>All</option> 
 
</select>

Cependant, si je continue l'événement onchange, il ne déclenche la fonction que lorsque je change la sélection. Je veux également déclencher la fonction lorsque la page est chargée avec la sélection par défaut que j'ai définie (qui est Oui dans l'exemple ci-dessus).

Merci.

Répondre

0

Ajouter une fonction onload à votre balise body:

<body onLoad='somefunction()'> 
0

Ce que je recommande est de construire une fonction indépendante pour le calcul de l'indice sélectionné. Ensuite, je voudrais mapper manuellement une variable à l'élément <select> et attacher un gestionnaire onchange() que d'appeler cette fonction, en passant lui-même en tant que paramètre.

Avec cette configuration, vous avez à la fois une fonction pour calculer la valeur sélectionnée de tout élément <select>, et l'élément cible <select> déjà mappé à une variable pour un accès facile. Vous pouvez alors simplement passer cette variable dans la fonction de chargement de la page:

/* Function to grab the selection, which takes a `<select>` element as a parameter */ 
 
function getSelectedIndexes(select) { 
 
    for (var i = 0; i < select.options.length; i++) { 
 
    if (select.options[i].selected) { 
 
     return i; 
 
    } 
 
    } 
 
} 
 

 
var select = document.getElementsByTagName("select")[0]; 
 
select.onchange = function(e) { 
 
    console.log(getSelectedIndexes(this)); // Selection on change 
 
} 
 

 
console.log(getSelectedIndexes(select)); // Default selection
<select> 
 
    <option disabled selected> Select 
 
    </option> 
 
    <option selected="selected" value='yes'> Yes 
 
    </option> 
 
    <option value='no'> No 
 
    </option> 
 
    <option value='all'> All 
 
    </option> 
 
</select>

Hope this helps! :)

+0

merci l'homme c'est une solution que je pense à –

0

Pourquoi n'appelez-vous pas la fonction lorsque la fenêtre est chargée? Je suppose que cela va résoudre votre problème.

window.onload = function() { 
 
    if (selectEl.value) // or use (selectEl.value == "yes) 
 
    somefunction() 
 
}; 
 

 
var selectEl = document.getElementById("sel"); 
 

 
function somefunction() { 
 
    console.log(selectEl.value); 
 
}
<select id="sel" onchange='somefunction()'> 
 
    
 
<option selected="selected" value='yes'>Yes</option> 
 
    <option value='no'>No</option> 
 
    <option value='all'>All</option> 
 
    </select>