How to get the selected text from form_dropdown?

Question

I can't get the text in form_dropdown it always return the option value. Please help.

view

<?php echo form_open_multipart('upload/do_upload');?>
<?php 
    $cont ='';
    $dept='';
    foreach($level->result() as $row) {
        $cont = $row->userlevel;
        $dept = $row->department;
    }
    if(strtoupper($cont)=="USER") {
        echo "<strong>".$dept."&emsp;</strong>";
    }
    else {
        echo form_dropdown('department_name', $dept_name,'','id="department_name"');
    } 
?>
<br/><br/>
<div class="btn-group">
    <span id="status2"><?php echo form_dropdown('document_name', $document_name, '', 'id="document_name"'); ?></span>
</div>
<br/><br/>
<label for="file">Select File To Upload:</label>
<input type="file" name="userfile" multiple class="btn btn-file"/>
</br></br>
<input type="submit" value="Upload File" class="btn btn-primary"/>
<?php echo form_close(); ?>

<script>
    window.onload = function() {
        var form_data = {
            dept_name: "<?php echo $dept; ?>",
            ajax: 1
        };
        $.ajax({
            url:"<?php echo site_url("document/document_dept_received"); ?>",
            data:form_data,
            type:'POST',
            success: function(msg){
                document.getElementById("status2").innerHTML = msg;
            }
        });
    };

    $("#department_name").change(function() {
        var form_data = {
            dept_name: $("#department_name option:selected").text(),
            ajax: 1
        };
        $.ajax({
            url:"<?php echo site_url("document/document_dept_received"); ?>",
            data:form_data,
            type:'POST',
            success: function(msg){
                document.getElementById("status2").innerHTML = msg;
            }
        });
    });
</script>

controller

$upload_data = $this->upload->data();
$data['thumbnail_name'] = $upload_data['raw_name']. '_thumb' .$upload_data['file_ext'];
$file_array = array(
    'image'         => $data['thumbnail_name'],
    'image_name'    => $upload_data['file_name'],
    //'description'   => "",
    'date_created'  => date('Y-m-d H:i:s', now()),
    'date_modified' => date('Y-m-d H:i:s', now()),
    'author'        => $this->session->userdata('username'),
    'size'          => $upload_data['file_size'],
    'type'          => $upload_data['image_type'],
    'width'         => $upload_data['image_width'],
    'height'        => $upload_data['image_height'],
    'document_name' => $this->input->post("document_name"),
    'department'    => $this->input->post("department_name"),
    //'notes'         => "",
);

when I try this...

print_r($this->input->post("document_name"));
print_r($this->input->post("department_name"));

it shows 1 and 1...

what I want is the text not the id or value of options. Example: I selected the IT Department and Folder 1, it will display/record IT Department and Folder 1 to database.

Answer 1

Exchange array values and keys:

$dept_name = array_flip($dept_name);

form_dropdown('department_name', $dept_name,'','id="department_name"');

Same for $document_name.

This switches from <option value="id">name</option> to <option value="name">id</option>.

---

If you need <option value="name">name</option>, rebuild the array to get a name 2 name relationship.

$dept_names2 = array();

foreach($dept_name as $item_id => $item_name)
{
    $dept_names2[$item_name] = $item_name; // name as key and value
}

form_dropdown('department_name', $dept_names2,'','id="department_name"');

An array with structure "name=>name" will work with your ajax requests, too - because you are using $("#department_name option:selected").text(). so you are already working with the names, not the ids. no adjustment needed.

Answer 2

Check this: http://jsfiddle.net/Lev0sjjx/2/

Note: The jquery code is just for demonstration purposes

HTML

<select id="test">
    <option value="1">Test One</option>
    <option value="2">Test Two</option>
</select>

Javascript / jQuery

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

$(function() {
    $('#test').change(function() {
        var text = getSelectedText('test');
        alert(text);
    });
});