简体   繁体   English

具有JS功能的多个选择框,不适用于数组

[英]Multiple Select boxes with JS function, doesn't work with array

I have the following code which creates two multiple selects that use js to move values between each other. 我有以下代码创建了两个多个选择,这些选择使用js在彼此之间移动值。 The code as it is below functions but I wish to use the POST data values for the items in the select. 下面的代码可以正常运行,但是我希望对选择项使用POST数据值。 I wish to change to so that I can get the array of values of post in PHP but when I change it to an array[] it doesn't function moving the values between the two select boxes. 我希望更改为,以便可以获取PHP中的post值数组,但是当我将其更改为array []时,它无法在两个选择框之间移动值。

<html>
<body>
<script>
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" method=post action=test.php >
<table border="0" cellpadding="3" cellspacing="0">
    <tr>
        <td>
            <select multiple name="left" size="9">
                <option value="1">Row 1</option>
                <option value="2">Row 2</option>
                <option value="3">Row 3</option>                
                <option value="4">Row 4</option>
                <option value="5">Row 5</option>
            </select>
        </td>
        <td align="center" valign="middle">
            <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example.left,document.example.right)"><br>
            <br>
            <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example.right,document.example.left)">
        </td>
        <td>
            <select multiple name="right" size="9">                           
            </select>
        </td>
    </tr>   
</table>
<br><input type='submit' value='Submit'>
</form>
</body>
</html>

If you change it to name="left[]" then you have to change document.example.left to document.example['left[]'] to match it. 如果将其更改为name="left[]"则必须将document.example.left更改为document.example['left[]']以匹配它。

 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; } } } } 
 <form name="example" method=post action=test.php> <table border="0" cellpadding="3" cellspacing="0"> <tr> <td> <select multiple name="left[]" size="9"> <option value="1">Row 1</option> <option value="2">Row 2</option> <option value="3">Row 3</option> <option value="4">Row 4</option> <option value="5">Row 5</option> </select> </td> <td align="center" valign="middle"> <input type="Button" value="Add >>" style="width:100px" onClick="SelectMoveRows(document.example['left[]'],document.example['right[]'])"><br> <br> <input type="Button" value="<< Remove" style="width:100px" onClick="SelectMoveRows(document.example['right[]'],document.example['left[]'])"> </td> <td> <select multiple name="right[]" size="9"> </select> </td> </tr> </table> <br><input type='submit' value='Submit'> </form> 

You could also give them IDs, and then use document.getElementById() . 您也可以给它们提供ID,然后使用document.getElementById()

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM