Получить значение из выбранной пользователем опции в элементе выбора опции и обновить форму ввода на основе выбранной опции

Я хочу обновить форму, как только пользователь выберет, почему он хочет связаться со мной, чтобы я мог получить от него соответствующую информацию, у меня есть это на данный момент;

==== HTML ====

<select name="Reason" id="Reason" required>
         <option value="" disabled selected>Select Option</option>
         <option value="Please give me a price" >Price</option>
         <option value="I have some positive feedback">Postive Feedback</option>
         <option value="I have some negetive feedback">Negetive Feedback</option>
         <option value="I have a suggestion">Suggestion</option>
         <option value="Other">Other</option>
 </select>

Я попытался использовать JQuery, чтобы получить значение или текст, выбранный из опции select (я не против). Мне удалось получить окно предупреждения, которое появилось после изменения значения с помощью функции .change(), но не смог получить значение выбранного параметра или распечатать какой-либо способ узнать, является ли тот или иной параметр был выбран.

==== JQuery ====

var selectedOption = $("#reason option:selected").text()

reason.change(checkValue);

function checkValue(){
    alert(selectedOption);
}

Я просто хочу, чтобы некоторые текстовые поля ввода появлялись, если выбрано «Цена», и если что-либо еще выбрано, просто появляется многострочная текстовая область.


jquery contact-form
person user2568418    schedule 10.07.2013    source источник
comment
Где-то определена переменная reason? (reason.change(checkValue)).   -  person putvande    schedule 10.07.2013
comment
да это 'var Reason = $('#Reason');' вот так   -  person user2568418    schedule 10.07.2013

Ответы (4)


arrow_upward
1
arrow_downward

Я думаю, вам это нужно, не так ли? специально ответил за:

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

$("#textBoxes").hide();
$("#textAreas").hide();

$("#Reason").change(function(){
    if(this.value == "Please give me a price"){
         $("#textBoxes").show();
         $("#textAreas").hide();
    }
    else{
         $("#textAreas").show();
         $("#textBoxes").hide();
    }
});

Демонстрация скрипки

person Dhaval Marthak    schedule 10.07.2013
comment
Я попробовал это сделать, я добавил текстовое поле на страницу для демонстрации. мой код не является встроенным, если это имеет значение при загрузке сообщения, и поля текстового поля скрываются, но они не появляются снова при выборе параметра - person user2568418; 10.07.2013
comment
@user2568418 user2568418 Хорошо .. не могли бы вы обновить мою скрипку и дать больше информации о том, как вы хотели показать свои текстовые поля или текстовые области? - person Dhaval Marthak; 10.07.2013
comment
будет ли иметь значение, является ли JQuery встроенным кодом или из другого документа? - person user2568418; 10.07.2013
comment
Да, так будет, потому что мы используем статические идентификаторы, поэтому лучше пока написать их в строке. - person Dhaval Marthak; 10.07.2013
comment
Это гениально, теперь это работает. Только одно, хотя я предполагаю, что если я установлю эти поля как «обязательные», форма не будет отправлена? Вы знаете об этом? - person user2568418; 10.07.2013
comment
@ user2568418 Вы можете установить проверку, используя $("#form1").validate() Краткое описание проверки формы - person Dhaval Marthak; 10.07.2013

arrow_upward
0
arrow_downward

Вам нужно будет получить значение выбранного параметра внутри вашего обработчика, иначе переменная не будет обновлена ​​текущим значением. Кроме того, селекторы jQuery чувствительны к регистру, поэтому вам нужно использовать #Reason, а не #reason.

Это должно сработать для вас:

$('#Reason').on('change', function(){
    var selectedOption = $(this).find("option:selected").text();
    alert(selectedOption);
});

Рабочая демонстрация

person cfs    schedule 10.07.2013

arrow_upward
0
arrow_downward

Вам нужно изменить свой код следующим образом:

$('#Reason').change(checkValue);

function checkValue(){
    alert($(this).find('option:selected').text());
}

ДЕМО-ПРОГРАММА FIDDLE

person palaѕн    schedule 10.07.2013

arrow_upward
0
arrow_downward

я бы попробовал

$('#reason').on('change', function(){
    //pick your poison
    alert($(this).val());
    alert($(this).find('option:selected').html());
});

Удачи!

person MonkeyZeus    schedule 10.07.2013