时间戳

首页 > 解决方案 > 在 Web 表单上，如何使用 javascript 控制台将值从“未选择”组移动到“已选择”组？

html - 在 Web 表单上，如何使用 javascript 控制台将值从“未选择”组移动到“已选择”组？

问题描述

我正在尝试半自动化表单填写，但不能使用 Selenium 或任何其他需要安装的工具。表单有多种添加文本的方法，包括文本框、下拉菜单、单选按钮和两个与项目列表平行的框，您可以在项目列表之间移动项目，以便它们被选中或不选中。我什至不知道正确的术语，但要对其进行描述：页面在未选择的列表中加载了“红色”、“绿色”和“蓝色”，您可以单击以将任何您想要的颜色移到所选中在提交表格之前列出。

对于文本框，我一直在使用它，效果很好：

document.getElementById('textbox').value = hello;

我已经尝试过选择/未选择的列表，以便我可以在控制台中输入一些代码，它会自动将正确的颜色移动到选定的列表中。我可以在未选择的列表中突出显示颜色，但似乎无法进入所选列表。涉及鼠标点击，我怀疑这可能是我的失败。有没有办法使用控制台的输入将颜色移动到选定的列表中？以下是选定/未选定列表的 HTML。

<div class="form-row">
  <label for="colour_type">Colour type:</label>  <div class="content">
  
  <div>
  <div style="float: left">
    <div style="font-weight: bold; padding-bottom: 0.5em">Unassociated</div>
    <select name="unassociated_colour_type[]" id="unassociated_colour_type" multiple="multiple" class="sf_admin_multiple" size="10">
<option value="1">red</option>
<option value="5">green</option>
<option value="7">blue</option>
</select>
  </div>
  <div style="float: left">
    <input type="image" name="commit" src="/admin/sf/sf_admin/images/next.png" style="border: 0" onclick="double_list_move($('unassociated_colour_type'), $('associated_colour_type')); return false;" /><br />
    <input type="image" name="commit" src="/admin/sf/sf_admin/images/previous.png" style="border: 0" onclick="double_list_move($('associated_colour_type'), $('unassociated_colour_type')); return false;" />
  </div>
  <div style="float: left">
    <div style="font-weight: bold; padding-bottom: 0.5em">Associated</div>
    <select name="associated_colour_type[]" id="associated_colour_type" multiple="multiple" class="sf_admin_multiple-selected" size="10"></select>
  </div>
  <br style="clear: both" />
</div>
    </div>
</div>

标签： htmlforms

解决方案

我认为这就是您将选项从一个框移到另一个框的目的，您可以使用以下方法执行此操作。

// grab the two elements
unAss = document.getElementById("unassociated_colour_type");
ass   = document.getElementById("associated_colour_type");

// move element 3 to the second box
ass.add(unAss[2]);

注意这可以用 unAss.add(ass[n]) 反转，其中 n 是列表中从零开始的位置。

注意移动项目，因为列表引用会发生变化，因此在迭代时您可能会发现倒数更好。

推荐阅读