John John - 3 months ago 11
HTML Question

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

i am having the following html markup. upon the

dropdown
change of a
select element (project_dp)
, then i am fetching the parent
div
. and after getting the
parent div
i am fetching the
next div
of this
parent div
. after that when i try to use
find
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>
<div class="div_cell">
<select class="form-control task" id="log_time_task_id" name="log_time[task_id]"></select>
</div>


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
element(select.task)
present in the
next_div
. when i use
alert
statement to see the
html
, then its returning nothing.

Answer

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'}))