Le serveur est mentalement retardé, veuillez remplacer la partie du code contenant la sélection pleine chasse par des caractères demi-chasse.
Code du programme
<script type="text/javascript">
var enfantCreate=false;
fonction Décalage(e)
//Obtenir la position absolue de l'étiquette
{
var t = e.offsetTop;
var l = e.offsetLeft;
var w = e.offsetWidth;
var h = e.offsetHeight-2;
pendant que(e=e.offsetParent)
{
t+=e.offsetTop;
l+=e.offsetLeft;
}
retour {
haut :t,
à gauche : l,
largeur : w,
hauteur : h
}
}
fonction chargeｓｅｅｃｔ(obj){
//Première étape : obtenir l'emplacement de la sélection
var offset=Décalage(obj);
//Étape 2 : Masquer la vraie sélection
obj.style.display="aucun";
//Étape 3 : Créer un div virtuel pour remplacer select
var iDiv = document.createElement("div");
iDiv.id="ｓｌｅｃｔ" + obj.name;
iDiv.style.position = "absolu" ;
iDiv.style.width=offset.width + "px" ;
iDiv.style.height=offset.height + "px" ;
iDiv.style.top=offset.top + "px" ;
iDiv.style.left=offset.left + "px" ;
iDiv.style.background="url( iDiv.style.border="1px solid #ccc";
iDiv.style.fontSize="12px";
iDiv.style.lineHeight=offset.height + "px" ;
iDiv.style.textIndent="4px";
document.body.appendChild(iDiv);
//Étape 4 : Afficher les options par défaut dans select
var tValue=obj.options[obj.selectedIndex].innerHTML;
iDiv.innerHTML=tValue ;
//Étape 5 : Simuler un clic de souris
iDiv.onmouseover=function(){//mouvements de la souris
iDiv.style.background="url( }
iDiv.onmouseout=function(){//la souris s'éloigne
iDiv.style.background="url( }
iDiv.onclick=function(){//clic de souris
if (document.getElementById("selectchild" + obj.name)){
// Détermine si le div a été créé
si (enfantCréer){
// Déterminez si la liste déroulante actuelle est ouverte. Si elle est ouverte, fermez-la. S'il est fermé, ouvrez-le.
document.getElementById("selectchild" + obj.name).style.display="none";
enfantCreate=false ;
}autre{
document.getElementById("selectchild" + obj.name).style.display="";
enfantCreate=true ;
}
}autre{
//Placez initialement un div sous le div précédent en remplacement des options.
var cDiv = document.createElement("div");
cDiv.id="ｓｏｅｃｔ" + obj.name;
cDiv.style.position = "absolu" ;
cDiv.style.width=offset.width + "px" ;
cDiv.style.height=obj.options.length *20 + "px" ;
cDiv.style.top=(offset.top+offset.height+2) + "px" ;
cDiv.style.left=offset.left + "px" ;
cDiv.style.background="#f7f7f7";
cDiv.style.border="1px argent massif";
var uUl = document.createElement("ul");
uUl.id="uUlchild" + obj.name;
uUl.style.listStyle="aucun";
uUl.style.margin="0";
uUl.style.padding="0";
uUl.style.fontSize="12px";
cDiv.appendChild(uUl);
document.body.appendChild(cDiv);
enfantCreate=true ;
pour (var i=0;i<obj.options.length;i++){
//Ajoute les options de la balise select d'origine à li
var lLi=document.createElement("li");
lLi.id=obj.options[i].value;
lLi.style.textIndent="4px";
lLi.style.height="20px";
lLi.style.lineHeight="20px";
lLi.innerHTML=obj.options[i].innerHTML;
uUl.appendChild(lLi);
}
var liObj=document.getElementById("uUlchild" + obj.name).getElementsByTagName("li");
pour (var j=0;j<obj.options.length;j++){
//Ajouter un événement de souris pour la balise li
liObj[j].onmouseover=function(){
this.style.background="gris";
this.style.color="blanc";
}
liObj[j].onmouseout=function(){
this.style.background="blanc";
this.style.color="noir";
}
liObj[j].onclick=fonction(){
//Faites deux choses. La première consiste à enregistrer la sélection de l'utilisateur dans la balise select d'origine. Sinon, quelle que soit la beauté du formulaire, la valeur de la sélection ne sera pas obtenue une fois le formulaire soumis.
obj.options.length=0;
obj.options[0]=nouvelle option(this.innerHTML,this.id);
//En même temps, on ferme la liste déroulante.
document.getElementById("selectchild" + obj.name).style.display="none";
enfantCreate=false ;
iDiv.innerHTML=this.innerHTML;
}
}
}
}
}
</script>
<style type="text/css">
ｓｌｅｃｔ{largeur:200px;hauteur:20px;}
</style>
</tête>
<corps>
<h1>Utilisez Javascript pour simuler la sélection afin d'obtenir des effets d'embellissement</h1>
<nom du formulaire="f">
<select id="province" name="province">
<option value="10">Jiangxi</option>
<option value="11">Fujian</option>
<option value="12">Guangdong</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Pékin</option>
<option value="13">Shanghai</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
<option value="13">Zhejiang</option>
</sélectionner>
</form>
<script type="text/javascript">
chargerｓｌｅｃｔ(document.f.province);
</script>