Как одним нажатием кнопки изменить содержимое выпадающего меню? - PullRequest
Новая
       8

Как одним нажатием кнопки изменить содержимое выпадающего меню?

0 голосов
/ 15 июля 2009

Я хотел бы сделать так, чтобы при нажатии кнопки определенные значения в раскрывающемся меню появлялись позже в том же документе.

Например, если была кнопка «Хонда», и она нажата, она изменит содержимое в раскрывающемся меню на детали модели автомобиля.

Как это можно сделать?

КОНТЕКСТ: веб-страница на сервере с поддержкой PHP

Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 15 июля 2009

Предлагаю самое простое решение - это JavaScript. Кажется перегрузка для использования фреймворка для такой простой задачи: 

<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>
1 голос
/ 15 июля 2009

Вы можете сделать это, используя jquery, с одним PHP-внутренним скриптом, чтобы заполнить значения поля выбора в зависимости от нажатой кнопки.

Несколько простых 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>

Тогда вам потребуется настроить PHP-скрипт, который предоставит вам соответствующий список значений для выбранной марки. Лучше всего делать это на бэкэнде, чтобы вы не жестко закодировали вещи в своем коде javascript. Сделайте файл с именем models.php. Он будет искать переменную «make», определенную в строке запроса, и вернет JSON-массив моделей для этого make. Если вы хотите, вы можете подключить это к базе данных моделей для производителей, так что вы не будете сильно кодировать вещи: 

<?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);
?>

Наконец, вам нужен JQuery, чтобы связать все это вместе. Добавьте этот блок скрипта на свою страницу: 

<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>

Конечно, убедитесь, что вы включили базовый скрипт jQuery на свою страницу;)

1 голос
/ 15 июля 2009

Вам потребуется использовать AJAX, а в jQuery встроены функции, которые могут упростить это.

Что касается самой кнопки, вы можете использовать onclick для запуска запроса. 

<input type="button" onclick="carRequest('honda');" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...