How do I get the first char of the selected text from dropdown and put it into textbox?

Question

How do I get the first char of the selected text from dropdown and put it into textbox?

Here is the html code:

<select id="ddl" onChange="configureDropDownLists(this,'ddl2')">
<option selected="selected" disabled="disabled">- Select Perspective -</option>
<?php 
$class = mysql_query("select * from class");
while($c = mysql_fetch_array($class))
    {
    ?>
    <option value="<?php echo $c['class_id']; ?>"><?php echo $c['class_name']; ?></option>
    <?php   
    } 
    ?>
    </select>

    <select id="ddl2">
    </select>

and this is the javascript code:

<script type="text/javascript">
    function configureDropDownLists(ddl1,ddl2) {

        <?php 
            $js_array1 = "(";
            $fin = mysql_query("select * from financial") or die(mysql_error());
            while($finn = mysql_fetch_array($fin))
            {
                $js_array1.= "'";
                $js_array1.= $finn['fin_name'];
                $js_array1.= "'";
                $js_array1.= ",";
            }
            $js_array1{strlen($js_array1)-1} = ')';

            echo "var financial = new Array".$js_array1.";"
        ?>

        <?php 
            $js_array2 = "(";
            $cus = mysql_query("select * from customer") or die(mysql_error());
            while($cuss = mysql_fetch_array($cus))
            {
                $js_array2.= "'";
                $js_array2.= $cuss['cus_name'];
                $js_array2.= "'";
                $js_array2.= ",";
            }
            $js_array2{strlen($js_array2)-1} = ')';

            echo "var customer = new Array".$js_array2.";"
        ?>

        <?php 
            $js_array3 = "(";
            $int = mysql_query("select * from internal") or die(mysql_error());
            while($intt = mysql_fetch_array($int))
            {
                $js_array3.= "'";
                $js_array3.= $intt['int_name'];
                $js_array3.= "'";
                $js_array3.= ",";
            }
            $js_array3{strlen($js_array3)-1} = ')';

            echo "var internal = new Array".$js_array3.";"
        ?>

        <?php 
            $js_array4 = "(";
            $learn = mysql_query("select * from learning") or die(mysql_error());
            while($learnn = mysql_fetch_array($learn))
            {
                $js_array4.= "'";
                $js_array4.= $learnn['learn_name'];
                $js_array4.= "'";
                $js_array4.= ",";
            }
            $js_array4{strlen($js_array4)-1} = ')';

            echo "var learning = new Array".$js_array4.";"
        ?>

        switch (ddl1.value) {
            case '1':
                document.getElementById(ddl2).options.length = 0;
                for (i = 0; i < financial.length; i++) {
                    createOption(document.getElementById(ddl2), financial[i], financial[i]);
                }
                break;
            case '2':
                document.getElementById(ddl2).options.length = 0; 
            for (i = 0; i < customer.length; i++) {
                createOption(document.getElementById(ddl2), customer[i], customer[i]);
                }
                break;
            case '3':
                document.getElementById(ddl2).options.length = 0;
                for (i = 0; i < internal.length; i++) {
                    createOption(document.getElementById(ddl2), internal[i], internal[i]);
                    createInput(document.getElementById(id), internal[i], internal[i]);
                }
                break;
            case '4':
                document.getElementById(ddl2).options.length = 0;
                for (i = 0; i < learning.length; i++) {
                    createOption(document.getElementById(ddl2), learning[i], learning[i]);
                }
                break;
                default:
                    document.getElementById(ddl2).options.length = 0;
                break;
        }

    }

    function createOption(ddl, text, value) {
        var opt = document.createElement('option');
        opt.value = value;
        opt.text = text;
        ddl.options.add(opt);
    }
</script>

I want to take the first char on the text of the 1st dropdown and then display it at the textbox.

<input type="text" name="code" id="code" value="">

How can I do this ?

Answer 1

In your configureDropDownLists() function, add:

// for the first char of the value:

document.getElementById('code').value = ddl1.value.charAt(0);

// or for the first char of the visible text

var text = ddl1[ddl1.selectedIndex].text;
document.getElementById('code').value = text.charAt(0);

I showed both in this example: http://jsfiddle.net/v7tHF/