<tr>
    <td>
        <input type="text" class="form-control updateElement" data-id="{$data.id}"
               data-tableName="organizations" data-colName="organization_name"
               data-id="{$data.id}"   value='{$data.organization_name}'>
    </td>

    <td>
        <input type="hidden" id="newOrgId" value="{$data.id}">
        <select class="form-control updateElement select2h" data-id="{$data.id}"
                data-tableName="organizations" data-colName="list_id"  id="list_id_{$data.id}">
            <option value="">choose</option>
            {foreach  $price_lists as $single}
            <option value="{$single.id}" >{$single.name}</option>
            {/foreach}
        </select>
    </td>

    <td>
        <select class="form-control organizations_parents updateElement"
                data-tableName="organizations" data-colName="parent_id"
                data-id="{$data.id}"   id="organizations_parents{$data.id}">
            <option value="">choose</option>
            {foreach  $orgParents as $single}
            <option value="{$single.id}"  {if $data.parent_id == $single.id }
                    selected  {/if}>{$single.name}</option>
            {/foreach}
            <option value="-1" class="deleteoptincompo">تعديل </option>
        </select>
    </td>
</tr>



{literal}
<script>
    var hosturl = $('#hosturl').val();
    var newOrgId = $('#newOrgId').val();
    $('#newOrgId').remove();
    $("#list_id_" + newOrgId).select2({placeholder: "Select", allowClear: true});

    $("#organizations_parents" + newOrgId).select2({
        width: '240px',
        allowClear: true,
        formatNoMatches: function (term) {
            /* customize the no matches output */
            var thisId = $(this).attr("id");
            return "<input class='form-control' id='neworganizations_parentsTerm' value='" + term + "'>\n\
                               <a href='#' id='addNewTableRow' data-id='" + thisId + "'  \n\
                                  class='btn blue custombtnstyle'>ADD</a>"
        }
    }).parent().find('.select2-with-searchbox').on('click', '#addNewTableRow', function () {
        /* add the new term */
        var newTerm = $('#neworganizations_parentsTerm').val();
        var thisId = $(this).attr("data-id");
        $.post(hosturl + "/controllers/invsdept.php?ac=addnewrecord", {selectId: 'organizations_parents', new_name: newTerm
        }, function (data) {

            $('.organizations_parents > .deleteoptincompo').before('<option value="' + Number(data) + '" >' + newTerm + '</option>');
            $('#' + thisId + '').select2('val', Number(data)); // select the new term
            $('.organizations_parents').select2('close'); // close the dropdown

            $('.updateElement[id=' + thisId + ']').trigger("change");
        });
    });

    $("body").on('change', '.organizations_parents', function () {
        var id = $(this).attr("data-id");
        var value = $(this).val();
        var hosturl = $('#hosturl').val();
        var selectId = 'organizations_parents' + id;
//##########################################################
        if (value == -1) {
            $('#' + selectId).select2('val', '');
            $.post(hosturl + '/controllers/visits.php?ac=editselect', {selectId: selectId, tableName: 'organizations_parents', notAll: 1}
            , function (data) {
                $("#detectionforview").html(data);
                $("#edit_detectionforview").modal('show');
            });
        }
    });
</script>
{/literal}