I am trying to fill an input type text from a select multiple, but I can get only  value from one selected

2. <select multiple="" id="selectGroupIds" name="selectGroupIds" aria-invalid="false">
3. <option value="">None</option>
4. <option selected="" value="1,2,3">Group 1</option>
5. <option value="4,5,6">Group 2</option>
6. <option value="10,20">Group 3</option>
7. </select>
8. 
   
9. <input type="text" name="jform[user_ids]" id="jform_user_ids" value="" class="inputbox" aria-invalid="false">
10. 
    
11. <script type="text/javascript">jQuery(function ($) {$("select[name='selectGroupIds']").change(function() {
12. var $value = this.value;
13. var $input =  $("#jform_user_ids");
14.     $input.val($value);
15. }).change();
16. });
17. </script>

if I select Group 1 and Group 2 

the value of input type text should be : 1,2,3,4,5,6  but with an additional comma  after each group ! 

otherwise it will be wrong = 1,2,34,5,6

thanks for helping