htmljquerydomjquery-selectorsparent

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.

Solution

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