將文本輸入字段添加到文本框

Question

我正在使用jquery將項目從一個文本框移動到另一個文本框。它完美的作品，但是我需要在下添加一個文本輸入值字段的每個選項組2

下面是一個例子：

這可能嗎？

http://jsfiddle.net/jquerybyexample/RbLVQ/light/

<script> 
$(document).ready(function() { 
    $('#btnRight').click(function(e) { 
     var selectedOpts = $('#lstBox1 option:selected'); 
     if (selectedOpts.length == 0) { 
      alert("Nothing to move."); 
      e.preventDefault(); 
     } 

     $('#lstBox2').append($(selectedOpts).clone()); 
     $(selectedOpts).remove(); 
     e.preventDefault(); 
    }); 

    $('#btnLeft').click(function(e) { 
     var selectedOpts = $('#lstBox2 option:selected'); 
     if (selectedOpts.length == 0) { 
      alert("Nothing to move."); 
      e.preventDefault(); 
     } 

     $('#lstBox1').append($(selectedOpts).clone()); 
     $(selectedOpts).remove(); 
     e.preventDefault(); 
    }); 
}); 
</script> 

<table style='width:370px;'> 
    <tr> 
     <td style='width:160px;'> 
      <b>Group 1:</b><br/> 
      <select multiple="multiple" id='lstBox1'> 
       <option value="ajax">Ajax</option> 
       <option value="jquery">jQuery</option> 
       <option value="javascript">JavaScript</option> 
       <option value="mootool">MooTools</option> 
       <option value="prototype">Prototype</option> 
       <option value="dojo">Dojo</option> 
     </select> 
    </td> 
    <td style='width:50px;text-align:center;vertical-align:middle;'> 
     <input type='button' id='btnRight' value =' > '/> 
     <br/><input type='button' id='btnLeft' value =' < '/> 
    </td> 
    <td style='width:160px;'> 
     <b>Group 2: </b><br/> 
     <select multiple="multiple" id='lstBox2'> 
      <option value="asp">ASP.NET</option> 
      <option value="c#">C#</option> 
      <option value="vb">VB.NET</option> 
      <option value="java">Java</option> 
      <option value="php">PHP</option> 
      <option value="python">Python</option> 
     </select> 
    </td> 
</tr> 
</table> 

Answer 1

你可以使用jQuery欺騙這種行爲。

$('#btnRight').on('click',function(e) { 
 
     var selectedOpts = $('#lstBox1 option:selected'); 
 
     if (selectedOpts.length == 0) { 
 
      alert("Nothing to move."); 
 
      e.preventDefault(); 
 
     } 
 
     var li_wrap = $('<li>'); 
 
     var label = $("<label>").text(selectedOpts.val()); 
 
     label.attr('for',selectedOpts.val()); 
 
     var input = $('<input type="text">').attr({id: selectedOpts.val(), name: selectedOpts.val()}); 
 
     label.append(input); 
 
     li_wrap.append(label); 
 
     $(selectedOpts).remove(); 
 
     $('ul#lstBox2').append(li_wrap); 
 
     e.preventDefault(); 
 
    }); 
 

 
    $('ul#lstBox2').on('click', 'li', function(){ 
 
     $('#lstBox2 li').removeClass('selected'); 
 
     $(this).addClass('selected'); 
 
    }); 
 
         
 
    $('#btnLeft').on('click',function(e) { 
 
     var selectedOpts = $('#lstBox2 li.selected'); 
 
     if (!selectedOpts) { 
 
      alert("Nothing to move."); 
 
      e.preventDefault(); 
 
     } 
 
     
 
     $('#lstBox1').append($('<option/>', { 
 
     value: selectedOpts.find('label').text(), 
 
     text : selectedOpts.find('label').text() 
 
    })); 
 
     $(selectedOpts).remove(); 
 
     e.preventDefault(); 
 
    });

body 
 
{ 
 
    padding:10px; 
 
    font-family:verdana; 
 
    font-size:8pt; 
 
} 
 

 
select 
 
{ 
 
    font-family:verdana; 
 
    font-size:8pt; 
 
    width : 150px; 
 
    height:100px; 
 
} 
 
input 
 
{ 
 
    text-align: center; 
 
    v-align: middle; 
 
    z-index:1; 
 
} 
 
li { 
 
    list-style-type:none; 
 
    padding:2px; 
 
    width:250px; 
 
    height:20px; 
 
    z-index:100; 
 
} 
 
li:hover { 
 
    background-color: gray; 
 
} 
 
label { 
 
    float:left; 
 
    z-index:1; 
 
} 
 
li.selected { 
 
    background-color:blue; 
 
    color:white; 
 
} 
 
ul, menu, dir { 
 
display: block; 
 
list-style-type: disc; 
 
-webkit-margin-before: 0px; 
 
-webkit-margin-after: 0px; 
 
-webkit-margin-start: 0px; 
 
-webkit-margin-end: 0px; 
 
-webkit-padding-start: 0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table style='width:370px;'> 
 
    <tr> 
 
     <td style='width:160px;'> 
 
      <select multiple="multiple" id='lstBox1'> 
 
       <option value="ajax">Ajax</option> 
 
       <option value="jquery">jQuery</option> 
 
       <option value="javascript">JavaScript</option> 
 
       <option value="mootool">MooTools</option> 
 
       <option value="prototype">Prototype</option> 
 
       <option value="dojo">Dojo</option> 
 
       <option value="asp">ASP.NET</option> 
 
       <option value="c#">C#</option> 
 
       <option value="vb">VB.NET</option> 
 
       <option value="java">Java</option> 
 
       <option value="php">PHP</option> 
 
       <option value="python">Python</option> 
 
     </select> 
 
    </td> 
 
    <td style='width:50px;text-align:center;vertical-align:middle;'> 
 
     <input type='button' id='btnRight' value =' > '/> 
 
     <br/><input type='button' id='btnLeft' value =' < '/> 
 
    </td> 
 
    <td style='width:160px;'> 
 
     <ul id="lstBox2"> 
 
     </ul> 
 
    </td> 
 
</tr> 
 
</table>