jQuery droppable - 在放置时替换元素

$(document).ready(function() {

$("#modules li").draggable({
    helper: "clone",
    cursor: "move",
    opacity: 0.35,
    revert: 'invalid'
  });
  
  $("#frames > ol").droppable({
    drop: function(event, ui) {
      var v = ui.draggable.attr("value");
      $(this).html(ui.draggable.clone());
      $("#results").html(v);

/* I need to get dropped fame number to hide or show list that much */
  if(x === n) {
      $("#x-ol1").show();
      $("#x-ol2").hide();
      $("#x-ol3").hide();              
  } else if(v === 11) {
      $("#x-ol1").hide();
      $("#x-ol2").show();
      $("#x-ol3").hide();                  
  } else if(v === 12) { 
      $("#x-ol1").hide();
      $("#x-ol2").hide();
      $("#x-ol3").show();                
  } else {
      $("#x-ol1").hide();
      $("#x-ol2").hide();
      $("#x-ol3").hide();                 
  }
    }
  });
  
  })

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
  }
  
  li {
    display: block;
    float:left;
  }
  
  .draggable {
    border: solid 1px #f1f1f1;
  }
  
  .frame {
   width:100px; 
    height:100px;
    border: 1px solid black;
    background-color: #f1f1f1;
    float: left;
  }

  .modules {
      /* width: 70px; */
      height: 70px;
  }


.col3 {
width:23%;
display:inline-block;
}
#a-ol1, #a-ol2, #a-ol3,
#b-ol1, #b-ol2, #b-ol3,
#c-ol1, #c-ol2, #c-ol3,
#d-ol1, #d-ol2, #d-ol3 {
    /* display: none; */
}

<div class="frames">
    <div class="row" id="frames">
        <ol id="frame1" class="frame col-3" value=1>1</ol>
        <ol id="frame2" class="frame col-3" value=2>2</ol>
        <ol id="frame3" class="frame col-3" value=3>3</ol>
        <ol id="frame4" class="frame col-3" value=4>4</ol>
    </div>  
    <div class="row">   
        <!-- GROUP LIST 1 -->          
        <div id="group-list-a" class="group-list-a col3">
            <select name="a-ol1" id="a-ol1">
                <option value="a-optionlist1-1">A Option List 1 (1)</option>
                <option value="a-optionlist1-2">A Option List 1 (2)</option>
                <option value="a-optionlist1-3">A Option List 1 (3)</option>
            </select>        
            <select name="a-ol2" id="a-ol2">
                <option value="a-optionlist2-1">A Option List 2 (1)</option>
                <option value="a-optionlist2-2">A Option List 2 (2)</option>
                <option value="a-optionlist2-3">A Option List 2 (3)</option>
            </select>                        
            <select name="a-ol3" id="a-ol3">
                <option value="a-optionlist3-1">A Option List 3 (1)</option>
                <option value="a-optionlist3-2">A Option List 3 (2)</option>
                <option value="a-optionlist3-3">A Option List 3 (3)</option>
            </select>                            
        </div>
        <!-- GROUP LIST 2 --> 
        <div id="group-list-b" class="group-list-b col3">
            <select name="b-ol1" id="b-ol1">
                <option value="b-optionlist1-1">B Option List 1 (1)</option>
                <option value="b-optionlist1-2">B Option List 1 (2)</option>
                <option value="b-optionlist1-3">B Option List 1 (3)</option>
            </select>                         
            <select name="b-ol2" id="b-ol2">
                <option value="b-optionlist2-1">B Option List 2 (1)</option>
                <option value="b-optionlist2-2">B Option List 2 (2)</option>
                <option value="b-optionlist2-3">B Option List 2 (3)</option>
            </select>                        
            <select name="b-ol3" id="b-ol3">
                <option value="b-optionlist3-1">B Option List 3 (1)</option>
                <option value="b-optionlist3-2">B Option List 3 (2)</option>
                <option value="b-optionlist3-3">B Option List 3 (3)</option>
            </select>                            
        </div>
        <!-- GROUP LIST 3 --> 
        <div id="group-list-c" class="group-list-c col3">
            <select name="c-ol1" id="b-ol1">
                <option value="c-optionlist1-1">C Option List 1 (1)</option>
                <option value="c-optionlist1-2">C Option List 1 (2)</option>
                <option value="c-optionlist1-3">C Option List 1 (3)</option>
            </select>                         
            <select name="c-ol2" id="c-ol2">
                <option value="c-optionlist2-1">C Option List 2 (1)</option>
                <option value="c-optionlist2-2">C Option List 2 (2)</option>
                <option value="c-optionlist2-3">C Option List 2 (3)</option>
            </select>                        
            <select name="c-ol3" id="c-ol3">
                <option value="c-optionlist3-1">C Option List 3 (1)</option>
                <option value="c-optionlist3-2">C Option List 3 (2)</option>
                <option value="c-optionlist3-3">C Option List 3 (3)</option>
            </select>                            
        </div>
        <!-- GROUP LIST 4 --> 
        <div id="group-list-d" class="group-list-d col3">
            <select name="d-ol1" id="d-ol1">
                <option value="d-optionlist1-1">D Option List 1 (1)</option>
                <option value="d-optionlist1-2">D Option List 1 (2)</option>
                <option value="d-optionlist1-3">D Option List 1 (3)</option>
            </select>                         
            <select name="d-ol2" id="d-ol2">
                <option value="d-optionlist2-1">D Option List 2 (1)</option>
                <option value="d-optionlist2-2">D Option List 2 (2)</option>
                <option value="d-optionlist2-3">D Option List 2 (3)</option>
            </select>                        
            <select name="d-ol3" id="d-ol3">
                <option value="d-optionlist3-1">D Option List 3 (1)</option>
                <option value="d-optionlist3-2">D Option List 3 (2)</option>
                <option value="d-optionlist3-3">D Option List 3 (3)</option>
            </select>                            
        </div>                
    </div>                                           
</div>