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

时间:2017-05-11 20:16:44

标签: javascript html-select

我有以下代码创建两个使用js在彼此之间移动值的多个选择。代码低于函数,但我希望使用select数据项的POST数据值。我希望改为,以便我可以在PHP中获取post的值数组,但是当我将其更改为数组[]时,它不会在两个选择框之间移动值。

<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>

1 个答案:

答案 0 :(得分:0)

如果您将其更改为name="left[]",则必须将document.example.left更改为document.example['left[]']才能与之匹配。

&#13;
&#13;
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;
      }
    }
  }
}
&#13;
<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>
&#13;
&#13;
&#13;

您也可以为他们提供ID,然后使用document.getElementById()