Jquery Seçenek Seç Değerleri ekle

3 Cevap php

Ben kaç gün için bu seçeneği googled var ama bir çözüm bulamadım.

Ne istiyorum:

  1. Ben iki Seçiniz Box var
  2. İlk Select Box Ülke Adları var
  3. Ikinci Seç Kutu Boş

Ben ilk select kutusundan herhangi bir ülkeyi (yani Birleşik Krallık) seçeneğini ne ben istiyorum, bir php sorgu ardından ikinci jQuery kullanarak kutusunu seçmek için ekleyebilirsiniz tablodan bütün şehirler adını almak için çalışmalıdır.

Teşekkürler

3 Cevap

Assumption

  • Eğer şehirleri ve bu gibi görünüyor çıkışları JSON istediğiniz ülkenin kimliği bir parametre ("country") alır bir komut dosyası ("/ getCities.php") var:

    {"Cities":
[
	{
		"ID": 1,
		"Name": "New York"
	},
	{
		"ID": 2,
		"Name": "Los Angeles"
	}
]}

    (Sen JSONLint sizin JSON doğrulamak için kullanabilirsiniz.)

Bu doğrultuda sonra belki bir şey:

<select id="Countries">
    <!-- omitted -->
</select>
<select id="Cities"></select>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    // when a new country is selected...
    $("#Countries").change(function() {
      // ...clear existing cities...
      $("#Cities").empty();
      // ...and repopulate cities based on JSON data.
      $.getJSON( "/getCities.php",
      // pass the selected country ID
        {
          country: $("#Countries").val()
        },
        function(data) {
          $.each(data.Cities, function(n, city) {
              // add a new option with the JSON-specified value and text
              $("<option />").attr("value", city.ID).text(city.Name).appendTo("#Cities");
          });
        }
      );
    }); // $("#Countries").change(function() { ... });
  }); // $(document).ready(function() { ... });
</script>

Bu deneyin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript">
    function moveItem() {
        $("#target").append($("#source").find(':selected'));
    }
</script>

<select id="source" size="3">
    <option>option1</option>
    <option>option2</option>
    <option>option3</option>    
</select>

<button onclick="moveItem()">Move Item</button>

<select id="target" size="3"></select>

"Kademeli açılan" böyle bir ortak arayüz - Ben zor size herhangi bir örnek bulamadık inanmak bulmak. Here's a PHP example Bu doğru yönde bir işaret olacaktır.

etiketler