I have the following code which creates two multiple selects that use js to move values between each other. The code as it is below functions but I wish to use the POST data values for the items in the select. 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.
<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.
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()
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.