John John - 2 months ago 4
HTML Question

unable to find the select element using jquery present inside a div?

i am having the following html markup. upon the

change of a
select element (project_dp)
, then i am fetching the parent
. and after getting the
parent div
i am fetching the
next div
of this
parent div
. after that when i try to use
method to get the
select element(task)
present inside this div, then i am getting nothing.

<div class="div_cell">
<select class="form-control project_dp" id="log_time_project_id" name="log_time[project_id]" onchange="populate_tasks($(this))">
<option value=""></option>
<option disabled="true" selected="selected">Please Select</option>
<option value="18">akjsda</option>
<option value="19">approval process and approvers save test</option>
<option value="39">billable test</option></select>
<div class="div_cell">
<select class="form-control task" id="log_time_task_id" name="log_time[task_id]"></select>

and the jquery logic

function populate_tasks(project_dp) {

div_node = project_dp.parent();

next_div = project_dp.parent().next( "div" ).find("select.task");
alert(next_div.html()); // giving nothing.

but i am unable to get the
present in the
. when i use
statement to see the
, then its returning nothing.


Its expected result., .html() get the content of the matched element.

You are getting nothing since the select.task element is empty as it has no child element.

As per comment, If you want to populate it. Use following

next_div.append($('<option />', {text: 'SomeText', value:'SomeValue'}))