Jquery - Select Val() Only Returns First Value Of Dropdown

I have a simple form summary script that returns all values entered in a form, and displays the values in a concise format in a dialog window. The script works as intended for inpu

Solution 1:

You have alot of code if you just want to get the selected fruit value:

HTML:

<p><label><b>*</b> Fruit </label><selectname="fruit"id="fruit"><optionvalue="A">Apple</option><optionvalue="B">Orange</option><optionvalue="C">Pear</option></select></p><divid="dialogsummary"></div>

JavaScript:

$("#fruit").change(function() {
    $("#dialogsummary").text("You selected: " + $(this).val());
});

jsFiddle

The clue is basically: $(".fruit").val() to get the selected value. If you want instead the text (since you're building a summary): $(".fruit").find(":selected").text();

Update If you want something 'generic' instead: (not tested)

var str = "";
summary.find("select").each(function() {
    str += "Value for " + $(this).prop('name') + " is " + $(this).val();
});