如何在下拉列表中获取所选值 <div><p> 使用点击事件的jQuery？

Question

I have a Dropdown Month that its filled dynamically depending on the year selected input.

When the user click on the Month Dropdown, this show a list of months. how do I get the selected month value by the user using JQuery? Assuming that the dropdown list is filled dynamically.

This function gets called when the user click on the displayed list of months

$("#month").click(function() {
    var value = $(this).children("div p").val(); // return undefined
    console.log("month: " + value);
}); 

HTLM Dropdown

<div id="month">
    <span class="input">März</span>
    <div class="dropdown">
        <p></p>
    </div>
</div>

When the user click on the Dropdown Month, the UpdateMonths() functions gets called and filled the list dynamically

$("#month span").click(function(event) {

    $("#month div").html(UpdateMonths());


    event.stopPropagation();
    if (!$(this).hasClass('disabled')) { // only open downdown when not disabled
        Dropdown($(this).parent().attr("id"));
    } else Dropdown(); // hide all dropdown menues
});

function Dropdown (element) {

    $("#month div").hide(); // hide all dropdowns
    if (element) $("#"+element+" div").toggle(); // show dropdown of specified element
}

This is how I fill the list

function UpdateMonths(){
var temp = "";
    if (parseInt(Get.Year()) <= 2012){
        for (var i = 0; i < Get.Months.length; i++) {
            var monthsChain = "<p>"+Get.Months[i]+"</p>";
            temp += monthsChain;
        };
    }else{
        temp = "<p>Januar</p><p>Februar</p><p>März<p></p><p>April</p><p>Mai</p><p>Juni</p><p>Juli</p>"; 
    }
    return temp;
}

Answer 1

You can try

var value = $(this).find("div p").text();

Or more specific:

var value = $(this).find("div.dropdown p").text();

Answer 2

.val() is used to get the value of form fields. If you want the text content of a generic HTML element (such as <span> or <p> , you need to use .text() :

$("#month").click(function() {
    var value = $(this).find('.input').text();
    console.log("month: " + value);
}); 

Make sure you remove the period (.) from the HTML class of your dropdown, too - classes must start with a letter, not numbers or punctuation.

Answer 3

Looks like your selected value is in the <span> not the <p> , so it should be:

var value = $(this).children("span.input").text();

Edit: you can do it like this:

$(document).on('click', '#month', function(e) {
    if($(e.target).is('p')) {
        var value = $(e.target).text();
        console.log(value);
    }
}); 

Answer 4

I am assuming you want to get the month selected from the list of p elements.

HTML (structure similiar to question)

<div id="month">
    <span class="input"></span>
    <div class="dropdown">
        <p>January</p><p>February</p>
    </div>
</div>

<div id="year">
    <span class="input"></span>
    <div class="dropdown">
        <p>2013</p><p>2014</p>
    </div>
</div>

jQuery, delegate event needed because <p> elements are generated dynamically.

$("#month, #year").on('click', '.dropdown p', function() {
    var value = $(this).text();
    console.log("month: " + value);
}); 

How to set month value to span (inside the scope above)

$(this).parent().siblings('span').text(value);

And jsfiddle to play with

http://jsfiddle.net/2nuhw/4/

Answer 5

You can use val() for input fields. use text() to get the text fields. Usually

and having text.

try like this:

var value = $(this).children("div p").text();

or

var value = $(this).children("div p").html();

using html() you can get any type of value that belongs to the span or p tag.