2

Bem, eu quero passar os valores que coloquei no <input> para a "box" e também ter a opção de tirar ela.

Exemplo:

<table border="1" align="center" height="180">
    <tr>
        <td>    <font face="arial" align="center" valign="middle" color="blue" size="-1">PATRIMÔNIO</font></br>
            <input type="text" name="tx_MenuOrigem" maxlength="16" size="16" style="font-size:11; color:Black;" onkeypress="return SomenteNumero(event);" value="">
            <input type="button" onClick="move(this.form.tx_MenuOrigem,this.form.cb_MenuDestino)" value=">>">
            <br>
            <select multiple size="9" name="cb_MenuDestino" style="width:300"></select>
            <br>
            <input type="button" align="center" valign="middle" onClick="tira(this.form.cb_MenuDestino)" value="<<">
            <br>
        </td>
        <td align="center" valign="middle" width="15%">
            <br>
        </td>
        <td>    <font face="arial" align="center" valign="middle" color="blue" size="-1">SERIAL</font>

            </br>
            <input type="text" name="cb_MenuOrigem2" maxlength="16" size="16" style="font-size:11; color:Black;" onkeypress="return SomenteNumero(event);" value="">
            <input type="button" onClick="move(this.form.cb_MenuOrigem2,this.form.cb_MenuDestino2)" value=">>">
            <br>
            <select multiple size="9" name="cb_MenuDestino2" id="cb_MenuDestino2" style="width:230"></select>
            <br>
            <input type="button" align="center" valign="middle" onClick="tira(this.form.cb_MenuDestino)" value="<<">
            <br>
        </td>
    </tr>
</table>

Exemplo em JSF: Codigo_Exemplo

No JSF deixei um exemplo com uma function, mostrando mais ou menos oque ela deve fazer. No caso da function no JSF, o usuário seleciona a opção para popular a outra box).

3

2 Respostas 2

2

Segue um breve exemplo em jquery: (basta incluir as condições e verificações necessárias)

jquery:

$('.botao_add').click(function(){
    $(this).parent().children('select').append($('<option>', {
    value: $(this).parent().children('input:first').val(),
    text: $(this).parent().children('input:first').val()}));
});

$('.botao_del').click(function(){
    $(this).parent().children('select').children('option:selected').each(function() {
        $(this).remove();
    });
});

HTML:

<table border="1" align="center" height="180">
    <tr>
        <td>    <font face="arial" align="center" valign="middle" color="blue" size="-1">PATRIMÔNIO</font></br>
            <input type="text" name="tx_MenuOrigem" maxlength="16" size="16" style="font-size:11; color:Black;" value="">
            <input type="button" class='botao_add' value=">>">
            <br>
            <select multiple size="9" name="cb_MenuDestino" style="width:300"></select>
            <br>
            <input type="button" align="center" valign="middle" class='botao_del' value="<<">
            <br>
        </td>
        <td align="center" valign="middle" width="15%">
            <br>
        </td>
        <td>    <font face="arial" align="center" valign="middle" color="blue" size="-1">SERIAL</font>

            </br>
            <input type="text" name="cb_MenuOrigem2" maxlength="16" size="16" style="font-size:11; color:Black;" value="">
            <input type="button"  class='botao_add' value=">>">
            <br>
            <select multiple size="9" name="cb_MenuDestino2" id="cb_MenuDestino2" style="width:230"></select>
            <br>
            <input type="button" align="center" valign="middle" class='botao_del' value="<<">
            <br>
        </td>
    </tr>
</table>

jsfiddle: http://jsfiddle.net/jaderw/ht5b9xzk/

1
  • Obrigado @Jader, me ajudou muito oque você me passou !!
    – Felipe
    Commented 7/08/2014 às 16:56
1

Fonte: http://www.johnwbartlett.com/cf_tipsntricks/index.cfm?TopicID=86

Exemplo :

<html>
<head>
<title>Multi-list copy example</title>
<body>
<script language="Javascript">
function SelectMoveRows(SS1,SS2)
{
    var SelID='';
    var SelText='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            var newRow = new Option(SelText,SelID);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}
function SelectSort(SelList)
{
    var ID='';
    var Text='';
    for (x=0; x < SelList.length - 1; x++)
    {
        for (y=x + 1; y < SelList.length; y++)
        {
            if (SelList[x].text > SelList[y].text)
            {
                // Swap rows
                ID=SelList[x].value;
                Text=SelList[x].text;
                SelList[x].value=SelList[y].value;
                SelList[x].text=SelList[y].text;
                SelList[y].value=ID;
                SelList[y].text=Text;
            }
        }
    }
}
</script>
<form name="Example">
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <select name="Features" size="9" MULTIPLE>
                <option value="2">Row 2</option>
                <option value="4">Row 4</option>
                <option value="5">Row 5</option>
                <option value="6">Row 6</option>
                <option value="7">Row 7</option>
                <option value="8">Row 8</option>
                <option value="9">Row 9</option>
            </select>
        </td>
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.Example.FeatureCodes,document.Example.Features)">
        </td>
        <td>
            <select name="FeatureCodes" size="9" MULTIPLE>
                <option value="1">Row 1</option>
                <option value="3">Row 3</option>
            </select>
        </td>
    </tr>
</table>
</form>

</body>
</html>
2
  • Mas nesse caso ele determina os campos na propria box, e oque eu necessito é que os campos que estiverem no input vão para a box, pois ainda irei ter um laço de vezes de repetição (mas isso é um outro caso).
    – Felipe
    Commented 7/08/2014 às 14:54
  • well, basta fazeres o mesmo que é feito ai para adicionar uma opção, com o valor da textbox.. ( e metes o value da textbox a vazio depois obviously ) Commented 7/08/2014 às 14:56

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .