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

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

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

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

КОНТЕКСТ: Веб-страница на PHP-сервер включен

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

источник

2009-07-15 ron8

Можем ли мы иметь какой-то контекст? Это веб-страница, настольное приложение? –

Он находится на веб-странице с сервером разрешения php и javascript. Спасибо! – ron8

AJAX не требуется. ron8, вы рассмотрели использование jQuery? http://jquery.com/ –

Я предлагаю простое решение является 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>

источник

2009-07-15 15:08:36 Nathan

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

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

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

источник

2009-07-15 14:50:43 Juddling

Спасибо! Я знаю это, однако мне нужна информация о функции. Я серьезно застрял, поскольку у меня ограничено знание Javascript и AJAX – ron8

Ну, я не могу сидеть здесь и писать вашу страницу для вас, мой друг, копаться в Интернете на некоторых примерах, пойти, и если вы застряли, напишите здесь и я могу помочь вам с конкретной проблемой. – Juddling

Albeit lame, вы можете немного упростить свои вещи и не использовать AJAX. Просто ... cringe ... поставьте все значения, которые вам понадобятся в переменных JavaScript, чтобы начать с (более cringing), а затем следуйте примеру Nathan. Серьезно, хотя, узнайте об ajax. –

Вы можете сделать это, используя 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 скрипт установки, чтобы дать вам соответствующий список значений, указанных марку выбранного. Лучше всего сделать это на back-end, чтобы вы не кодировали вещи в своем javascript-коде. Создайте файл под названием models.php. Он будет искать переменную «make», определенную в строке запроса, и возвращает массив моделей JSON для этого. Если вы хотите, вы можете подключить это к базе данных моделей для моделей, поэтому вы не трудно кодирования вещи:

<?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 скрипт на вашей странице;)

источник

2009-07-15 15:05:21 Parrots

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

ответ

Смежные вопросы