Question

我希望在用户选择他们想要与我联系的原因后更新表单，以便我可以从他们那里获取相关信息，我现在有这个;

==== 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来获取选项中选择的值或文本（我不介意哪个）。我设法通过使用.change（）函数获得一个警告框，一旦值发生了变化，但无法获得所选选项的值以显示或打印出某种方式来查明是否有一个或另一个选项已被选中。

==== JQuery ====

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

reason.change(checkValue);

function checkValue(){
    alert(selectedOption);
}

如果选择“价格”，我只想要显示一些输入文本字段，如果选择了其他任何内容，则只显示一个多行文本区域。

Answer 1

我认为你需要这个，是吗？特别回答：

我只想在选择“价格”时显示一些输入文本字段，如果选择了其他任何内容，则只显示一个多行文本区域。

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

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

Fiddle Demo

Answer 2

您需要在处理程序中获取所选选项的值，否则不会使用当前值更新变量。此外，jQuery选择器区分大小写，因此您需要使用#Reason而不是#reason。

这应该适合你：

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

<强> Working Demo

Answer 3

您需要像这样修改代码：

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

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

FIDDLE DEMO

Answer 4

我会尝试

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

祝你好运！

从select option元素的用户选择选项中获取值，并根据所选选项更新输入表单

4 个答案:

Fiddle Demo