Question

我有多个选择框，一个在左边，另一个在右边。有添加和删除按钮，因此用户可以将项目从左侧框添加到右侧框，反之亦然，将项目从右侧框中删除到左侧。一切都运作良好但是当我提交表格时，有两个方框没有提交。

这是javascript：

<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" method="post" action="someactionpage.cfm">
Use the ADD button to move columns that match with your excel file    
from the right pane to the left

                <select name="Features" size="20" MULTIPLE>
                    <option value="MName">Middle Name</option>
                    <option value="Gender">Gender</option>
                    <option value="RaceCode">Race Code</option>
                    <option value="BirthDate">Birthdate</option>
                    <option value="HomeAddr1">Home Address 1</option>
                    <option value="HomeAddr2">Home Address 2</option>
                    <option value="HomeAddr3">Home Address 3</option>
                    <option value="HomeCity">Home City</option>
                    <option value="HomeState">Home State</option>
                    <option value="HomeZip">Home Zip</option>
                    <option value="HomeCountry">Home Country</option>
                    <option value="HomePhone">Home Telephone</option>
                    <option value="HomeFax">Home Fax</option>
                    <option value="HomeCell">Home Cell Phone</option>
                    <option value="HomeEmail">Home Email</option>         
                </select>

                <input type="Button" value="Add >>" style="width:100px" 
      onClick="SelectMoveRows(document.Example.Features,
      document.Example.FeatureCod
      es)">
                <input type="Button" value="<< Remove"    
      style="width:100px" onClick="SelectMoveRows(document.Example.
     FeatureCodes,document.Example.Features)">

                <select name="FeatureCodes" size="20" MULTIPLE>
                    <option value="LName">Last Name</option>
                    <option value="FName">First Name</option>
                </select>

<tr><td><input type="submit" name="SubmitColumn" value="NEXT"></td></tr>
</table>
</form>

同样，这些代码工作正常。项目从let到right移动和移除都很好，反之亦然。问题是，当我提交表单时，我没有得到这两个表单字段值。我没有看到form.Features和form.FeatureCodes，但我在操作页面上显示form.SubmitColumn

Answer 1

正如@Leigh在他的评论中提到的，我们需要在选择框中选择选项，以便将这些值发送到服务器。我已经选择了多个选择框中的选项。所以现在它将在表单提交上给出这些值。

我注意到SelectSort函数出现故障，因此我修改了以下代码并使其正常工作。请尝试以下代码。希望它可以解决您的需求。

<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.appendChild(newRow);            
                SS1.options[i]=null;
            }
        }
    }

    function selectall(form){

        var sel1 = form.Features.options;
        var sel2 = form.FeatureCodes.options;

        for (i=0;i<=sel1.length-1;i++){
            sel1[i].selected = true;
        }

        for (j=0;j<=sel2.length-1;j++){
            sel2[j].selected = true;
        }
    }
</script>

<强> HTML：

<form name="Example" method="post" action="" onsubmit="javascript:selectall(this);">
Use the ADD button to move columns that match with your excel file    
from the right pane to the left

                <select name="Features" size="20" MULTIPLE>
                    <option value="MName">Middle Name</option>
                    <option value="Gender">Gender</option>
                    <option value="RaceCode">Race Code</option>
                    <option value="BirthDate">Birthdate</option>
                    <option value="HomeAddr1">Home Address 1</option>
                    <option value="HomeAddr2">Home Address 2</option>
                    <option value="HomeAddr3">Home Address 3</option>
                    <option value="HomeCity">Home City</option>
                    <option value="HomeState">Home State</option>
                    <option value="HomeZip">Home Zip</option>
                    <option value="HomeCountry">Home Country</option>
                    <option value="HomePhone">Home Telephone</option>
                    <option value="HomeFax">Home Fax</option>
                    <option value="HomeCell">Home Cell Phone</option>
                    <option value="HomeEmail">Home Email</option>         
                </select>

                <input type="Button" value="Add >>" style="width:100px" 
      onClick="SelectMoveRows(document.Example.Features,document.Example.FeatureCodes)">
                <input type="Button" value="<< Remove"    
      style="width:100px" onClick="SelectMoveRows(document.Example.
     FeatureCodes,document.Example.Features)">

                <select name="FeatureCodes" size="20" MULTIPLE>
                    <option value="LName" >Last Name</option>
                    <option value="FName" >First Name</option>
                </select>

<tr><td><input type="submit" name="SubmitColumn" value="NEXT"></td></tr>
</table>
</form>

多个选择字段无法提交表单？

1 个答案: