Question

我正在使用multibox作为基于codeigniter的项目的一部分，在这里我试图使用下面共享的自定义js代码在框中移动值

第一个框中显示的值是在页面加载时从db获取的，用于使用javascript将所需值移动到第二个框。我的目标是，在保存数据后，第一个框中的值已经移动到第二个框不应该是可见的，同时第一个框的源数据不应该改变。

现在我可以选择第二个框的值并保存成功但是当我在保存后再次加载页面时，我在第一个框中看到移动的值，这在视觉上创建了值的重复并且会使用户感到困惑。另一方面，如果我尝试将值移回第一个框，这会在保存数据时产生冲突。

我有什么方法可以更改我的代码，以便再次在第一个框中无法使用移动的值

多功能版的HTML版本

<fieldset class="emp_contact">
  <legend>Area Allocation</legend>
  <div class="form-group input-group">
    <table width="100%" border="0" cellpadding="10" cellspacing="10" style="border:1px solid #ccc">
      <tr>
        <td width="40%">
          <p>Available Areas</p>
        </td>
        <td width="12%">&nbsp;</td>
        <td width="40%">
          <p>Selected&nbsp; Areas</p>
        </td>
      </tr>
      <tr>
        <td valign="top" id="myarea_list">
          <?php echo $aval_area_list ?>
        </td>
        <select name="aval_id_temp" id="aval_id_temp" multiple style="display:none"></select>
        <td>
          <table width="100%" border="0">
            <tr>
              <td align="center">
                <input type="Button" value=">>" onClick="SelectMoveRows_all(document.form.avail_area, document.form.selec_area)">
                <br>
                <br />
                <input type="Button" value=">" onClick="SelectMoveRows(document.form.avail_area, document.form.selec_area)">
                <br>
                <br>
                <input type="Button" value="<<" onClick="SelectMoveRows_all(document.form.selec_area, document.form.avail_area)">
                <br>

                <br>
                <input type="Button" value="<" onClick="SelectMoveRows(document.form.selec_area, document.form.avail_area)">

              </td>
            </tr>

            <tr>
              <td align="center">&nbsp;</td>
            </tr>
          </table>
        </td>
        <td valign="top">
          <?php echo $sel_area_list ?>
          <select name="sel_id_temp" id="sel_id_temp" multiple style="display:none"></select>
        </td>
      </tr>
    </table>

  </div>
</fieldset>

使用Javascript函数

    function SelectMoveRows_all(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;
          for (j = SS2.options.length - 1; j >= 0; j--) {
            SS2.options[j].selected = true;
          }
        }
      }
      SelectSort(SS2);
    }

    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;
          for (j = SS2.options.length - 1; j >= 0; j--) {
            SS2.options[j].selected = true;
          }

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

php codeigniter - 管理多选框中的值

0 个答案: