Select Multiple on Form Dropdown

[SarahB12]

I need some assistance changing a single select into a multiple select form drop-down. I am having issues with the multiple selections storing. Thank you for your help!

                $var = "

                <script type='text/javascript'>

                jQuery(function(){

                    

                         jQuery('form').attr('method', 'get');

                         jQuery('form').after('<input type=\"submit\"  id=\"doaction_k2\" class=\"button-secondary action\" value=\"Apply Folder Access\" style=\"background: red; color: #fff;\">');

                         

                

                    var thisurl = '';

                    var thaturl = '';

                    jQuery('#doaction_k2').live('click', function(){

                           jQuery('.new_file_access').each(function(){

                            thisurl = thisurl + '|' + jQuery(this).attr('userid') + '~' + jQuery(this).val();

                           });

                           

                           jQuery('.new_file_readwrite').each(function(){

                            thaturl = thaturl + '|' + jQuery(this).attr('userid') + '~' + jQuery(this).val();

                           });

                        

                        jQuery.post(document.URL, { update_access: 1, file_access: thisurl, file_readwrite: thaturl }, function(){

                            window.location = document.URL;

                        });

                        

                        return false;

                        });

                    });

                    

                </script>";

            }

                

                $var .= "<select multiple='yes' id='file_manager_accessk".$user_id."[]' class='new_file_access' userid='$user_id'><option value='' $noaccess>No Access</option>";
                
                foreach($ACCESS_ARRAY as $key=>$value)

                {

                        $key = str_replace('\\', '/', $key);

                        $keys = $key .'~'. $urls.'/'.$value;

                        $keys = substr($keys, 0, strlen($keys)-1);

                        $keys1 = base64_encode($keys);

                        

                        $var .= "<option value='$keys1' $select[$keys]>$value</option>";

                }

                $var .= "</select>";

                return $var;

~ Sarah

[darkfreaks]

have you tried jquery multiselect?

[SarahB12]

I have added the jquery multiselect, but the options are not saving.

        global $wpdb;

        global $ACCESS_ARRAY;

        global $READWRITE_ARRAY;

        $urls = get_bloginfo('url');

        //$user = get_userdata( $user_id );
//form processing
$selected = array();
if (isset($_POST["file_manager_accessk".$user_id])) {
	$selected = $_POST["file_manager_accessk".$user_id];
}
if (!empty($selected)) : print_r($selected); endif;  
        

        switch ($column_name) 

        {

            case 'access' :

            

            add_user_meta( $user_id, 'file_manager_access', '7', true );

            

            $sel = get_usermeta($user_id, 'file_manager_access');

            $select[$sel] = 'selected="1"';

            if($sel=='')

            {

                $noaccess = 'selected="1"';

            }

            else

            {

                $noaccess = '';

            }

            

            if(KSM_DEF_ONCE != '12345')

            {

                define('KSM_DEF_ONCE', "12345");

                

                //$var = "<input type='hidden' name='update_access' value='1' id='update_user_access'>";

                

                $var = "
<link rel='stylesheet' type='text/css' href='http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css' />
<link rel='stylesheet' type='text/css' href='http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/style.css' />
<link rel='stylesheet' type='text/css' href='http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/prettify.css' />
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js'></script>
<script type='text/javascript' src='http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/prettify.js'></script>
<script type='text/javascript' src='http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js'></script>
                <script type='text/javascript'>
				jQuery(function(){
				$('select').multiselect();
			})

                jQuery(function(){

                    

                         jQuery('form').attr('method', 'get');

                         jQuery('form').after('<input type=\"submit\"  id=\"doaction_k2\" class=\"button-secondary action\" value=\"Apply Folder Access\" style=\"background: red; color: #fff;\">');

                         

                

                    var thisurl = '';

                    var thaturl = '';

                    jQuery('#doaction_k2').live('click', function(){

                           jQuery('.new_file_access').each(function(){

                            thisurl = thisurl + '|' + jQuery(this).attr('userid') + '~' + jQuery(this).val();

                           });

                           

                           jQuery('.new_file_readwrite').each(function(){

                            thaturl = thaturl + '|' + jQuery(this).attr('userid') + '~' + jQuery(this).val();

                           });

                        

                        jQuery.post(document.URL, { update_access: 1, file_access: thisurl, file_readwrite: thaturl }, function(){

                            window.location = document.URL;

                        });

                        

                        return false;

                        });

                    });

                    

                </script>";

            }

                

                $var .= "<select multiple='yes' id='file_manager_accessk".$user_id."[]' class='new_file_access' userid='$user_id'><option value='' $noaccess>No Access</option>";
              
                foreach($ACCESS_ARRAY as $key=>$value)

                {

                        $key = str_replace('\\', '/', $key);

                        $keys = $key .'~'. $urls.'/'.$value;

                        $keys = substr($keys, 0, strlen($keys)-1);

                        $keys1 = base64_encode($keys);

					   $mediaform = '<option value="'. $value . '" '
						 . (in_array($value, $selected) ? 'selected' : '') . '>' . $value.'</option>';
					   $var .= $mediaform;

                }

                $var .= "</select>";

                return $var

[priyankagound]

The below code has worked for me. try out with the help of this example.

 

 

<!DOCTYPE html>

<html>

<head>

<script>

function selectMultiple()

{

document.getElementById("mySelect").multiple=true;

}

</script>

</head>

<body>

 

<form>

<select id="mySelect" size="4">

<option>Apple</option>

<option>Pear</option>

<option>Banana</option>

<option>Orange</option>

</select>

<input type="button" onclick="selectMultiple()" value="Select multiple">

</form>

<p>Before you click on the "Select multiple" button, try to select more than one option (by holding down the Shift or Ctrl key). Then click on the "Select multiple" button and try again.</p>

 

</body>

</html>

 

 

Run it once, you will get an idea.