jquery: combobox - klik show on textbox

Bagaimana cara saya punya combo box (select) yang bila di klik akan terbaca nilai dan textnya? Sebenarnya pertanyaan ini sudah jelas akan jawabannya. Tetapi awalnya saya tidak memahami apa yang dibutuhkan. Tapi perlahan dipelajari apa sih yang dibutuhkan. Maka inilah awalnya. Dia memiliki table bernama produk, dimana produk ini akan ada gambarnya, nah saat saat di klik combobox yang sesuai produk.. Akan keluar nama yang sesuai dengan combo box. Untuk jawaban bisa liat langsung dibawah

Kenapa tidak pake ajax (sederhana)? jawabannya karena penanya tidak ingin memanfaatkan ajax, mengingat ajax sendiri di anggap susah dan terlalu rumit untuk solusi ini. Jadi dia ingin yang sederhana, dan disitulah saya memanfaatkan jquery.



Jquery bagi beberapa orang di anggap susah, tetapi sebenarnya hanya masalah kebiasaan dan juga masalah cape ngetik (terutama document startnya) yang bikin kendala.. sisanya oke-oke aja seh.

Script yang akan saya buat ini memanfaatkan

• change()
• val()
• text()
• html()

sebenarnya html tidak wajib tapi kebiasaan di ajax pakai html jadi ke ikut.

script ini sebenarnya 1 kesatuan tapi kubagi 2 yaitu

• HTML
• javascript

Untuk HTML berisi perintah untuk memanggil jquery nya. Saya memakai versi terbaru, ada bagusnya anda download bila untuk di local tp kalau untuk di net.. manfaatkan jquery dari google..

untuk HTMLnya, secara garis besar hanya terdiri dari form saja.. seperti dibawah ini (bila tampilan jadi kacau maklumi)

<form>
    <select id="target" name="tes">
    <option>pilih satu</option>
    <option value="1">Nendo </option>
    <option value="2">Kapal One piece</option>
    <option value="3">Miku</option>
    <option value="4">Nendo</option>
    <option value="5">Gundam</option>
    </select>
    <p>Nilai<input class="nm" readonly></p> 
    <div class='detail'><img /></div>
    <div class='detail2'></div>
     
</form>

Jangan lupa di posisi div ada img. Img ini digunakan untuk gambar preview, jadi saat di klik akan ada gambarnya.

Untuk script saya tidak meletakkan di luar tetapi gabung dengan script utama, diletakkan dibawah

 $('#target').change(function(e){

id=$('#target').val();
     pos=$('select#target option:selected').text();
     txt="value="+id+"; text="+pos;
     
     $('.nm').val(id);
 
     $('.detail2').html(txt);
     
 
        $("img").attr("src", function() { 
            return "img/" + id+ ".jpg"; 
        });
 
});

script yang saya berikan di codepaste memang berbeda untuk img nya.. tapi saya jelaskan 1-1. Inti dari jawabannya ada di script ini. cara kerjanya

1. kamu memilih apa yang akan dilihat (change). Kenapa tidak memanfaatkan click, karena klik kayaknya kurang interaktif. 
2. #target menunjuk pada id=target yang ada di select
3. anggap kita memilih Kapal One Piece
4. id akan mendapatkan nilai dari yang kamu pilih. dalam hal ini kita bisa memakai this dan val() untuk mendapatkan nilainya. Namun perlu diketahui nilai yang dimaksud adalah dari value (option value=xx) bukan text (disebelahnya).
5. saat ini id akan bernilai 2 bukan kapal one piece
6. pos akan mendapatkan nilai dari yang terpilih. Perhatikan perintahnya! sebenarnya bisa memakai this option:selected tapi saya belum mengujinya. Karena id sudah mendapat nilai maka untuk mendapatkan kapal saya memakai text
7. txt adalah tampilan yang akan diterima
8. nilai dari id akan dikeluarkan di textbox nm (yang ada dibawah)
9. nilai dari txt akan dikeluarkan di detail2 (div)
10. gambar akan di update dengan menyesuaikan idnya.. dalam hal ini saya punya foler bernama img, didalamnya ada file 1.jpg, 2.jpg, 3,jpg dst ; 2.jpg adalah gambar kapal onepiece, dimana saat dipilih maka gambarnya akan berubah ke gambar one piece tersebut.. atau mudahnya src nya akan menjadi "img/2.jpg"

script di atas jangan lupa tulis diantara tag  < script >

pertanyaan silakan ditanyakan disini..

codenya >> http://codepaste.net/62ps2u