1

I am trying to swap all the options between two Harvest Chosen select boxes. The scenario is I want to record details of a phone call. The call can either be inbound or outbound. If the call is outbound the I populate a select box (caller) with a list of possible values of those users that can make outbound calls and a second box (callee) with a list of possible values of those users they can make calls to. If the user updates the call type to be inbound then I want to swap the select boxes around so that the callee's are in the caller box and vice versa.

I very nearly have this working except each time I change the call type it keeps appending the values onto the end of the select options in each respective caller/callee select rather than completely clearing them and replacing all values.

Would appreciate some help as to why this is happening.

See http://jsfiddle.net/RyHFK

HTML

<label for="call_type">Call Type:</label>
<select name="call_type" id="call_type" class="chosen">
    <option value="OUTGOING">Outgoing</option>
    <option value="INCOMING">Incoming</option>                                                  
</select>

<label for="caller">Caller:</label>
<select name="caller" id="caller" class="caller chosen">
   <option value="Caller 1">Caller 1</option>   
   <option value="Caller 2">Caller 2</option>   
   <option value="Caller 3">Caller 3</option>   
  <option value="OTHER">Other</option>
</select>

<label for="caller">Callee:</label>
<select name="callee" id="callee" class="callee chosen">
   <option value="Callee 1">Callee 1</option>   
   <option value="Callee 2">Callee 2</option>   
   <option value="Callee 3">Callee 3</option>   
   <option value="OTHER">Other</option>
</select>
j0k
  • 22,600
  • 28
  • 79
  • 90
Adrian Walls
  • 852
  • 3
  • 19
  • 31
  • Take a look at this post and see if it works for you: http://stackoverflow.com/questions/47824/how-do-you-remove-all-the-options-of-a-select-box-and-then-add-one-option-and-se – Streamside Dec 12 '13 at 20:51

1 Answers1

2

The way it's written, you are appending to the same arrays every time there is a change. Move your calleeOptions and callerOptions variables inside your change handler:

// on call type change
$('#call_type').change(function(){

    var callerOptions = [];
    var calleeOptions = [];

Here's a jsFiddle.

Divey
  • 1,699
  • 1
  • 12
  • 22