listede aşağı damla kullanarak resmi değiştirmek nasıl?

2 Cevap php

Ben listede aşağı bir damla kullanmak istiyorsanız, her zaman ben de içeriği tıklatın, farklı resimler ortaya çıkacaktır. Ama ben başka bir kullanım için değerleri kullanmak istiyorum çünkü, mülkiyet 'değer' kullanmak istemiyorum.

Örnek:

<select name='test'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
</select>

Nasıl ki başarırız?

Teşekkürler.

Edit:

sivri önerisi ile çalışır.

<select name="dpt" onChange="picture.src=this.options[this.selectedIndex].getAttribute('data-whichPicture');" >
<option value="1839" data-whichPicture='./imgs/t1.jpg' >01</option>
<option value="1661" data-whichPicture='./imgs/t2.png' >02</option>
</select>
</select>
<img src='' id='picture' />

Edit:

Orada bir sorun i sayfayı yenileyin eğer, varsayılan resim görüntüler olduğunu, ancak açılan aşağı listeden seçim kalacak. Bu nasıl düzeltebilirim?

2 Cevap

Sen göstermek için ne görüntü bazı göstergesi tutmak için her seçeneğin "sınıfını" kullanabilirsiniz. Günümüzde Güzel İnsanlar bütün gibi HTML5 yazıyorsanız, bir "veri" özelliğini kullanabilirsiniz:

<option value='1' data-whichPicture='http://whatever.com/picture_017.jpg'>1</option>

Bu aslında size etiketleri üzerinde istediğiniz herhangi bir nitelik sopa olabilir, ama geçerli olmayan devlet sayfasını bırakacağım. HTML5 nitelikleri (sanmıyorum, ben geçen denedim HTML5 validator oldukça tehlikeli) henüz doğrulanmış değil, W3C onlar birgün olacağını vaat ediyor.

edit - Ayrıca - Sorunuzu resimleri değiştirmek için istediğiniz bahseder <select> üzerine zaman birileri "tıklama". Bu aslında her <option> olayları "tıklayın", ama muhtemelen bu da "değişim" olaylar için izlemek gerekir alabilirsiniz. Kullanıcılar seçimini değiştirmek için yukarı-aşağı ok tuşları sizin <select> içine sekmesi ve kullanabilirsiniz. Sen <select> ya da tıklamalar başka bir yerde dışarı kullanıcı sekmeler kadar "change" olayı almazsınız. (Bu "basışı" olayları almak mümkün olabilir, ben denemedim ama ben sadece olabilir ...)

edit - : Özniteliklerine (size "veri" hile kullanırsanız), sen elemanları üzerinde "getAttribute" yöntemini kullanmak zorunda olsun

var whichPicture = sel.options[sel.selectedIndex].getAttribute('data-whichPicture');

Sen seçenek değerleri ve görüntüler arasında bir harita kurabilirsiniz

{ 1: "imgA.png", 2: "imgB.png" }

ve sonra bu haritalama dayalı doğru görüntü yüklemek için bir işlevini kullanın.

Başka bir yaklaşım, bu gibi görüntü adı ile değerini artırmak için olabilir,

<select name='test'>
<option value='1;imgA.png'>1</option>
<option value='2;imgB.png'>2</option>
</select>

Ve sonra gerektiği gibi sayı değeri veya görüntü adını ayrıştırmak dize işlevlerini kullanın.

etiketler