How do i get value from Select input using jQuery after DOM has been loaded

Question

I am trying to get a value of a select but it keeps returning undefined . I have looked in a lot of places but can't seem to find the solution. I know it's to do with DOM being loaded before and not seeing my select . The thing is, I do get to a point where it says undefined after I change a value of select .

var getMethod = function(select) {
    var method = select;
    var d = $(method).val();
    return d;
}

$(document).on("change", "#select-main", function() {
    $("#container").replaceWith("<div class='containter text-center'><h1>Loading...</h1><i class='fa fa-spinner fa-pulse fa-5x'></i></div><br>");
    $("#container-table").remove();
    $("#header").remove();
    $("#export-button").remove();

    var newSelect = getMethod("#select-main");
    var newData = getDataToSend(links, newSelect);
    mainFunc(newSelect, newData);
});

The above code produces undefined when using .val() , as it does not see that there is a new input, but when I call .on() event on the input , I can do things like alert("HERE!");

Any advice?

Answer 1

If what you want is the value of the text between the options tag you shoud use text(); that is

$(method).text()

val is for the value of the value attribute in the select so

<select id="myselect">
  <option value="5">Prof</option>
</select>

$('#myselect').val() is 5 $('#myselect').text() is Prof

I would try this

 $(document).on("change", "#select-main", function() {



var valueYouAreLookingFor = $(this.selectedOptions).text();

console.log(valueYouAreLookingFor);


});

http://jsfiddle.net/sudakatux/fLy3hpem/

Hope it helps