Update textfield from list

Ask about general coding issues or problems here.

Moderators: egami, macek, gesf

Post Reply
php-forum Super User
php-forum Super User
Posts: 1803
Joined: Thu Mar 10, 2011 5:07 pm

Tue Mar 12, 2013 8:51 pm

This is basically javascript. Please read about onChange() function and use that to populate your second drop down.

php-forum Fan User
php-forum Fan User
Posts: 974
Joined: Mon Oct 01, 2012 12:32 pm

Wed Mar 13, 2013 8:29 am

I recently did something like this... the markup for the selects was:

Code: Select all

        <div id="townDiv">
            <form action="trystuff.php" method="post">
                <select id="sourceDisorders" class="sel" size="1" style="position: absolute;z-index:2;left:0px;" >
                    <option>Select a Disorder for Axis I</option>
                    <?php echo createDisorderOptions(1); //this populates the first box with options from a database?>
                </select><br />
                <select name="dsm_axis_1" id="targetDisorders" class="sel" size="10" style="padding-top:5px;" >
                <input type="hidden" name="axis_selected" id="axis_selected" />
and then the jquery and styling i used to move items back and forth on change is:

Code: Select all

        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <style type="text/css">
            {padding:0; margin:0; font-weight:normal;font-size:13px;}

            $(function() {
                $("#sourceDisorders").change(function() {
                    $("#sourceDisorders option:selected").appendTo('#targetDisorders');
                    $("#targetDisorders option").prop("selected",false);
                    $("#axis_selected").val( $("#axis_selected").val()+'|' +$("#targetDisorders option:last").text());
                $('#targetDisorders').dblclick(function() {
                    $('#targetDisorders option:selected').appendTo('#sourceDisorders');
                    var old='|' + $("#sourceDisorders option:last").text();
                    var targetList=$('#targetDisorders option:selected');
                    var foption = $('#sourceDisorders option:first');
                    var soptions = $.makeArray($('#sourceDisorders option:not(:first)')).sort(function(a, b) {
                        return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
                    foption.attr("selected", true).siblings("option").removeAttr("selected");
the first select is a single line tall, and as its value changes, whatever is selected is moved to the second select. Also, the input axis_selected is kept up to date with a pipe separated list of selections in the second select box, so that the form handler can just explode the list from $_POST['axis_selected']

Post Reply