Select box input on iPhone with bootstrap defaults to 0 items - html

Question

I have a problem with a form select box on iPhones with bootstrap and I am looking for a way to fix this. For some reason when an option is selected and the user moves on to the next select box below on the form, the selected option clears and says 0 Items selected, being required fields, this stops the user being able to submit the form. This only happens on mobile devices, it works fine in a desktop browser.
The HTML is pretty bog standard stuff, these options are generated by PHP and I am using a Smarty template:
<tr>
<td class="title">Industry <span class="pink">*</span></td>
<td><select class="validate3" name="industry[]" style="width:200px;height:230px;" multiple >
<option selected="selected">Select an Industry</option>
<option value="1004" >Apprenticeships</option>
<option value="1035" >Building Services</option>
<option value="1007" >Construction & Property Jobs</option>
<option value="1010" >Energy Jobs</option>
<option value="1011" >Engineering Jobs</option>
<option value="1008" >Industrial Jobs</option>
<option value="1018" >IT & Telecoms Jobs</option>
<option value="1022" >Management & Executive Jobs</option>
<option value="1023" >Manufacturing Jobs</option>
<option value="1003" >Mechanical and Electrical</option>
<option value="1026" >Motoring & Automotive Jobs</option>
<option value="1027" >Public Sector Jobs</option>
<option value="1029" >Recruitment Consultancy Jobs</option>
<option value="1033" >Temporary Work Jobs</option>
<option value="1034" >Transport & Logistics Jobs</option>
</select></td>
</tr>
<tr>
<td class="title">Job Type <span class="pink">*</span></td>
<td><select class="validate3" name="job_type[]" style="width:200px;height:70px;" multiple >
<option selected="selected">Select a Job Type</option>
<option value="1001" >Permanent</option>
<option value="1002" >Temporary</option>
</select></td>
</tr>
As you can see I have a default option selected, which does not clear itself until the user tries to change it.
Here is the Smarty code incase it is a problem here:
<select class="validate3" name="industry[]" style="width:200px;height:230px;" multiple {if !empty($error.industry)}class="required-field"{/if}>
<option selected="selected">Select an Industry</option>
{section name="z" loop=$select_industries}
<option value="{$select_industries[z].id}" {get_value field=multiplelocation selectvalue=$select_industries[z].id fieldname="industry"}>{$select_industries[z].industry}</option>
{/section}
</select>
<select class="validate3" name="job_type[]" style="width:200px;height:70px;" multiple {if !empty($error.job_type)}class="required-field"{/if}>
<option selected="selected">Select a Job Type</option>
{section name="y" loop=$select_jobtypes}
<option value="{$select_jobtypes[y].id}" {get_value field=multiplelocation selectvalue=$select_jobtypes[y].id fieldname="job_type"}>{$select_jobtypes[y].job_type}</option>
{/section}
</select>