javascript - HTML 多选提交在已添加值时中断

Question

我发现了一些奇怪的事情，我有 2 个选择列。您可以使用 jquery 选择值并将其推送到第二个选择。当我提交并且我的第二个选择没有值时，这非常有效。

首先选择字段:

<select style="width: 100%;" name="extensions" id="extensions" multiple="multiple" size="10" class="" >
<?php
        $result=mysql_query("SELECT name from MyTable");
        while($row = mysql_fetch_array($result))
        {
           echo "<option value='$row[0]'>$row[0]</option>";
        }
?>
</select>

移动按钮:

<input class="" type="button" id="right" value=">">
<input class="" type="button" id="left" value="<">

第二个选择字段:

<select style="width: 100%;" name="queuemembers[]" id="queuemembers" multiple="multiple" class="" size="10">
</select>

我的 Jquery 代码:

$('#left').click(function () {
   $('#queuemembers option:selected').appendTo('#extensions');
});
$('#right').on('click', function () {
   $('#extensions option:selected').appendTo('#queuemembers');
});

当我提交表单时，我可以使用 PHP 从第二个选择中获取 POST 值。

print_r($_POST['queuemembers']);

返回

Array ( [0] => MyName [1] => SistersName ) 

完美，我删除了移至此选择的所有值。

---------------------------------

这就是它崩溃的地方:

首先选择字段:

<select style="width: 100%;" name="extensions" id="extensions" multiple="multiple" size="10" class="" >
<?php
        $result=mysql_query("SELECT name from MyTable");
        while($row = mysql_fetch_array($result))
        {
           echo "<option value='$row[0]'>$row[0]</option>";
        }
?>
</select>

移动按钮:

<input class="" type="button" id="right" value=">">
<input class="" type="button" id="left" value="<">

第二个选择字段:

<select style="width: 100%;" name="queuemembers[]" id="queuemembers" multiple="multiple" class="" size="10">
<?php
        $result=mysql_query("SELECT name from MyTable WHERE name = 'MyName'");
        while($row = mysql_fetch_array($result))
        {
           echo "<option value='$row[0]'>$row[0]</option>";
        }
?>
</select>

我现在已在提交之前向第二个选择添加了一个值。

我的 Jquery 代码:

$('#left').click(function () {
   $('#queuemembers option:selected').appendTo('#extensions');
});
$('#right').on('click', function () {
   $('#extensions option:selected').appendTo('#queuemembers');
});

当我提交表单并使用 PHP 从第二个选择中获取 POST 值时，它不会返回使用 while 循环添加的值。它只会显示从第一个选择列收到的值。

print_r($_POST['queuemembers']);

返回

Array ( [0] => SistersName ) 

我怀疑这可能与 jquery 代码有关，但不是 100% 确定。

Answer 1

我发现了问题，我没有强制选择该选项

第二个选择字段:

<select style="width: 100%;" name="queuemembers[]" id="queuemembers" multiple="multiple" class="" size="10">
<?php
    $result=mysql_query("SELECT name from MyTable WHERE name = 'MyName'");
    while($row = mysql_fetch_array($result))
    {
       echo "<option value='$row[0]' selected>$row[0]</option>";
    }
?>
</select>

添加所选属性修复了它。

只需找到一种方法让 jquery 执行此操作，以避免使用取消选择值。