Nasıl bir düğmeye bir tıklama menüsünden açılan içeriğini değiştirebilirsiniz?

3 Cevap php

Ben bir düğme bir açılır menü belli bir değerleri tıklandığında aynı belgede daha sonra görünür yapmak istiyoruz.

Orada Honda adında bir düğme olduğunu ve tıklandığında Örneğin arabanın modeli ayrıntıları için bir açılır menü içeriği değiştirmek istiyorsunuz.

Nasıl bunu yapmak mümkün mü?

BAĞLAM: Bir PHP destekli sunucu üzerinde Web Sayfası

Şimdiden teşekkürler!

3 Cevap

Ben basit çözüm bir JavaScript olduğunu düşündürmektedir. Böyle basit bir görev için bir çerçeve kullanmak için aşırı görünüyor:

<html>
<head><title>JS example</title></head>
<body>
<script type="text/javascript"><!--

  //
  var opt_one = new Array('blue', 'green', 'red');
  var opt_two = new Array('plaid', 'paisley', 'stripes');

  //
  function updateTarget() {
    var f = document.myform;
    var which_r = null;
    if (f) {

      // first option selected? ("One")
      if (f.trigger.value == '1') {
    	which_r = opt_one;

      // ...or, second option selected? ("Two")
      } else if (f.trigger.value == '2') {
    	which_r = opt_two;

      // no known option, hide the secondary popup
      } else {
        f.target.style.display = 'none';
      }

      // did we find secondary options for the selection?
      if (which_r) {

        // reset/clear the target pop-up
        f.target.innerHTML = '';

        // add each option
        for (var opt in which_r) {
          f.target.innerHTML += '<option>' + which_r[opt] + '</option>';
        }

        // display the secondary pop-up
        f.target.style.display = 'inline';
      }
    }
  } // updateTarget()

//-->
</script>
<form name="myform" action="#">
  <select name="trigger" onchange="updateTarget();">
    <option>Select one...</option>
    <option>-</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select name="target" style="display:none;">
  </select>
</form>
</body>
</html>

Bunu inşa fonksiyonları bu basit yapabilirsiniz gelmiştir AJAX ve jQuery kullanmak gerekir.

Düğmenin gelince, isteği başlatmak için onclick kullanabilirsiniz.

<input type="button" onclick="carRequest('honda');" />

Eğer tıklatın düğmesini dayalı seçme kutusunun değerleri doldurmak için bir PHP arka uç komut ile, jquery kullanarak bu yapabilirdi.

Ile başlamak için bazı basit HTML:

<form action="script.php">
  <button id="Honda" onClick="loadModelsForMake('Honda');">Honda</button>
  <button id="Toyota" onClick="loadModelsForMake('Toyota');">Toyota</button>

  <select name="models" id="models">
    <option value="">Please Select A Make</option>
  </select>
</form>

Sonra size markası seçilen verilen değerlerin uygun listesini vermek için kurulmuş bir PHP komut dosyası gerekiyordu. Eğer javascript kodu şeyler kodlamalısınız kalmamak en arka-uç bunu. Models.php adında bir dosya oluşturun. Bu sorgu dizesinde tanımlanan "yapmak" değişkeni için bakmak ve bu marka modellerin bir JSON dizi dönecektir. İsterseniz zor şeyleri kodlama değil yani marka için model bir veritabanı için bu kadar kanca:

<?php
$models = array();
if ($_GET['make'] == 'Toyota') {
  models[] = array(id: 0, name: 'Matrix'});
  models[] = array(id: 1, name: 'Yaris'});
} else if ($_GET['make'] == 'Honda') {
  models[] = array(id: 0, name: 'Civic'});
  models[] = array(id: 1, name: 'Pilot'});
}
echo json_encode($models);
?>

Son olarak hep birlikte kanca JQuery gerekir. Sayfanızda için bu komut dosyası bloğu ekleyin:

<script type="text/javascript" charset="utf-8">
function loadModelsForMake(carMake) {
    $.getJSON("/models.php", {make: carMake, ajax: 'true'}, function(json){
      var options = '';
      for (var i = 0; i < json.length; i++) {
        options += '<option value="' + json[i].id+ '">' + json[i].name + '</option>';
      }
      $("models").html(options);
    })
}
</script>

Tabii ki sayfanızda baz jQuery komut dosyası içerir emin olun ;)

etiketler