将文本输入字段添加到文本框

I'm using jquery to move items from one text box to another. It works perfectly however I need to add a text input value field next to each option in group 2.

我正在使用jquery将项目从一个文本框移动到另一个文本框。它工作正常,但我需要在组2中的每个选项旁边添加一个文本输入值字段。

Here is an example:

这是一个例子:

Is this possible?

这可能吗?

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>

1 个解决方案

#1

You could spoof this behavior using jQuery.

你可以使用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>