2015-04-14 4 views
0

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

Так что, если выпадение вниз и другое падение ниже его, должно произойти следующее. Когда вы выбираете «A» из dropDown1, dropDown2 должен заполнять «Вы выбрали A». Если вы выберете «B», dropDown2 должен сказать «Вы выбрали B». То же самое касается «C»

Вот пример кода ниже.

<html> 
<body> 
<form> 

<select id="dropDown1"> 
    <option value = "A">A</option> 
    <option value = "B">B</option> 
    <option value = "C">C</option> 
</select> 

<select id="dropDown2"> 
    <option value="You chose A">You chose A</option> 
    <option value="You chose B">You chose B</option> 
    <option value="You chose C">You chose C</option> 
</select> 
</form> 

</body> 

</html> 

Любая помощь была бы принята с благодарностью. Если бы вы могли показать какой-то код, который был бы потрясающим, или если бы вы могли указать мне в правильном направлении, где я могу найти ответ, который будет потрясающим.

+1

Являются ли значения в элементе выбора 2 заданными, чем выбранные, на основе ввода 1 или вы хотите динамически добавлять опции для выбора 2 на основе пользовательского ввода в выборе 1? – brso05

+0

Да, выбор 2 будет зависеть от выбора 1. Итак, если dropDown1 = A, тогда dropDown 2 должен отображать «Вы выбрали C». В значительной степени это утверждение if then. Если «a» - это то, то «b» - это. –

+0

Да, все предопределено. Если вы выберете что-то из dropDown1, он заполнит dropDown2, dropDown3 и т. Д. Со значением, найденным в этих раскрывающихся списках. –

ответ

0

Для предопределенных значений, как то, что у вас есть, вы можете использовать следующий код JQuery/JavaScript:

$(function() { 
    $('#dropDown1').change(function(){ 
     $('#dropDown2').val('You chose ' + this.value); 
    }); 
}); 

JS скрипку здесь: http://jsfiddle.net/vleong2332/82w7p0a6/

Вот пример для изменения dropDown1 при изменении dropDown2. http://jsfiddle.net/vleong2332/82w7p0a6/1/

+0

Мне это нравится, мой единственный вопрос - могу ли я повторить это с несколькими полями? Так сказать, я выбираю A в dropDown1, может ли он заполнить что-то из dropDown2, dropDown3 и dropDown4. Также это можно использовать для заполнения полей ? –

+0

Вы наверняка можете, но это поможет мне лучше визуализировать его, если я знаю вашу разметку (HTML). Вероятно, JavaScript должен быть включен в функции, чтобы избежать повторяющегося кода. – vleong

+0

Посмотрите это. [link] (http://jsfiddle.net/vleong2332/82w7p0a6/2/) Обратите внимание, что я изменил значения в раскрывающемся списке, чтобы они были одинаковыми, но сохраняйте текст другим. – vleong

0

Вот еще один вариант, сокращенный от некоторой разработки, которую я сделал. Немного более гибкий, но и более сложный. Обратите внимание на то, как элементы отмечены атрибутами data-*, чтобы решить, что скрыто и показано. http://jsbin.com/siyexumulu/1/

+0

Полностью понять, как его сложнее, но я думаю, что это может помочь мне в конечном итоге с моей программой. Не для того, чтобы умело работать на Java, так что многие из них выглядят как тарабарщина, но это отличное время для изучения. Лол. Цените помощника. –

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