Kelebek Mobilya'daki Gibi Nasıl Yaparım?

pesimist · 22 Ekim 2012

Arkadaşlar link bu :

http://www.kelebek.com.tr/Satis-Noktalari

Burada 2 tane aşağı doğru açılır menü (Combobox) var ama bana 1 tane kafi.

Buradaki gibi bir şeyi nasıl yapabilirim? Ya da bana balık tutmayı öğretmeyin direkt balık verseniz bile olur

tambjk · 22 Ekim 2012

http://www.itechies.net/tutorials/jscript/jsexample.php-pid-combo.htm

En basitinden bir örnek;

Kod:

<html>
<head>
<title></title>
<meta http-*****="Content-Type" **********text/html; charset=iso-8859-1">


<script type="text/javascript">


window.onload=function() {


var df=document.forms[0][0]; /* this is another method for accessing form elements*/


df.onchange=function() {


   val=df.options[df.selectedIndex].value;


   txt=df.options[df.selectedIndex].text;


   alert('without a set "option value", \nOpera and Firefox take...\n\n "value" to refer to the "option text"'+
         ' ...\n\n '+val+'\n\n...IE returns nothing,\n\n but will submit the "text" as a "value"');


   alert('IE will only respond to "text" to give "option text"...\n\n '+txt);
  }
 }
</script>


</head>
<body>


<form action="http://www.google.com/" method="get"> <!--google is good for testing form submissions-->
<div>
<select name="select" >
<option>option one</option>
<option>option two</option>
<option>option three</option>
<option>option four</option>
<option>option five</option>
</select>
<input type="submit">
</div>
</form>


</body>
[LEFT]</html>[/LEFT]

Alıntıdır.

orcnd · 22 Ekim 2012

http://www.abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

pesimist · 22 Ekim 2012

Öncelikle sağolun arkadaşlar ama Kelebek Mobilya'nın ki biraz daha farklı arkadaşlar. Şehir seçtiğinizde direkt altında tablo şeklinde bayiler çıkıyor. Bu şekilde nasıl yapabilirim?

tambjk · 22 Ekim 2012

http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

Bu yardımcı olur belki, sağ tarafta download kısmı ile js leri elde edebilirsin.

keyloger · 22 Ekim 2012

Ajax

tambjk · 22 Ekim 2012

Kod:

<!doctype html>
<html>
    <head>
        <title>jQuery SelectBox</title>
        <meta http-*****="Content-type" **********text/html; charset=utf-8" />
        <link href="/ArchiveProjectWeb/Css/jquery.selectbox.css" type="text/css" rel="stylesheet" />
    </head>
    <body>


        <select name="country_id" id="country_id" tabindex="1">
            <option value="">-- Select country --</option>
            <optgroup label="North America">
                <option value="1">USA</option>
                <option value="9">Canada</option>
            </optgroup>
            <optgroup label="Europe">
                <option value="2">France</option>
                <option value="3">Spain</option>
                <option value="6">Bulgaria</option>
                <option value="7" disabled="disabled">Greece</option>
                <option value="8">Italy</option>
            </optgroup>
            <optgroup label="Asia" disabled="disabled">
                <option value="5">Japan</option>
                <option value="11">China</option>
            </optgroup>
            <option value="4">Brazil</option>
            <option value="10">South Africa</option>
        </select>


        
        <script type="text/javascript" src="/ArchiveProjectWeb/js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="/ArchiveProjectWeb/js/jquery.selectbox-0.2.js"></script>
        
        <script type="text/javascript">


        $(document).ready(


                function() {    
            
                    $("#country_id").change(function() {
                        var selectVal = $('#country_id :selected').val();
                        alert(selectVal);
                                                
                        $.ajax({
                            url : "getCity.call",
                            type : "POST",
                            dataType : "json",
                            data: {country_id: selectVal},
                            success : function(data) {
                                var options = '';
                                for (var i = 0; i < data.length; i++) {
                                    options += "<option value='" + i + "'>" + data[i] + "</option>";
                                }
                                      
                                document.getElementById('city_id').innerHTML = options;        
                            }
                        });
                    });
            });
            
        </script>


        <div class="container">
            
            <select name="city_id" id="city_id" tabindex="2">
        
        </select>
    </div>
    </body>
</html>

ülke selectbox'ından değişiklik olduğunda "getCity.call" isimli methodu çağırıp, bu methoda parametre olarak verdiğin ülke kodundan da ilgili ülkenin şehirlerini databaseden çekip bir string listesi içerisinde geri döndürüp city_id isimli selectbox a set edeceksin.

pesimist · 23 Ekim 2012

Herkese çok teşekkürler. İşlem tamamdır.

Kelebek Mobilya'daki Gibi Nasıl Yaparım?

pesimist

Rektör

tambjk

Müdavim

orcnd

Dekan

pesimist

Rektör

tambjk

Müdavim

keyloger

Rektör

tambjk

Müdavim

pesimist

Rektör

Benzer konular

SDN Haberleri

Son mesajlar

Forum istatistikleri

Sosyal ağlar