选择Harvest Chosen选择框之间的交换选项

时间:2013-12-12 20:45:55

标签: javascript jquery jquery-chosen

我正在尝试在两个Harvest Chosen选择框之间交换所有选项。场景是我想记录电话的详细信息。呼叫可以是入站呼叫,也可以是出站呼叫。如果呼叫是出站呼叫,我填充一个选择框(呼叫者),其中包含可以进行出站呼叫的那些用户的可能值列表,以及第二个框(被呼叫者),其中包含他们可以呼叫的那些用户的可能值列表。如果用户将呼叫类型更新为入站,那么我想交换选择框,以便被叫方位于呼叫方框中,反之亦然。

除了每次更改呼叫类型之外,我几乎都有这个工作,它会在每个相应的呼叫者/被呼叫者选择中将值附加到选择选项的末尾,而不是完全清除它们并替换所有值。

对于为什么会发生这种情况会有所帮助。

请参阅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>

1 个答案:

答案 0 :(得分:2)

编写它的方式,每次发生更改时,您都会附加到相同的数组。将您的calleeOptionscallerOptions变量移到更改处理程序中:

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

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

Here's a jsFiddle.