在网络表单上，如何使用JavaScript控制台将值从“未选定"组移到“选定"组? [英] On a web form, how can I move a value from an 'unselected' to a 'selected' group using javascript console?

问题描述

我正在尝试半自动执行表单填充，但是不能使用Selenium或任何其他需要安装的工具.表单具有多种添加文本的方式，包括文本框，下拉菜单，单选按钮以及与项目列表平行的两个框，您可以在它们之间移动项目，以便选择或不选择它们.我什至不知道正确的术语，而是要描述它:页面加载未选择列表中的红色"，绿色"和蓝色"，并且您可以单击以移到想要的任何颜色上在提交表单之前列出.

I'm trying to semi-automate form filling, but can't use Selenium or any other tool that requires installation. The forms have various ways of adding text, including text boxes, drop downs, radio buttons, and two boxes in parallel with a list of items, which you can move the items between so they're either selected or not selected. I don't even know the correct term for this but to describe it: the pages loads with 'red' and 'green' and 'blue' in the unselected list, and you can click to move over whichever colours you want into the selected list before submitting the form.

对于文本框，我一直在使用它以达到良好效果:

For text boxes, I've been using this to good effect:

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

我已经尝试过选择/未选择列表，以便我可以在控制台中输入一些代码，然后它将正确的颜色自动移至选择的列表.我可以在未选中的列表中突出显示颜色，但是似乎无法进入选中的列表.涉及鼠标单击，我怀疑这可能是我要撤消的操作.有没有一种方法可以使用控制台中的输入将颜色移到所选列表中?以下是选中/未选中列表的HTML.

I've tried experimenting with the selected/unselected list so that I can input some code into the console and it auto-moves the right colours to the selected list. I can get the colour highlighted in the unselected list, but can't seem to get in over to the selected list. There is a mouse click involved, which I suspect may be my undoing. Is there a way to move the colours over into the selected list using input into the console? Below is the HTML for the selected/unselected lists.

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

推荐答案

我认为这是将选项从一个框移到另一个框后要执行的操作，您可以使用以下命令进行此操作.

I think this is what you are after in moving the option from one box to the other, you can do this with the following.

// 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是列表中从零开始的位置.

NB this can be reversed with unAss.add(ass[n]) where n is the poision in the list starting from zero.

请小心移动物品，因为列表参考会发生变化，因此当您烦恼时，可能会发现倒数更好.

Take care moving items as the list reference will change therefore when itterating through you may find it better to count backwards.

这篇关于在网络表单上，如何使用JavaScript控制台将值从“未选定"组移到“选定"组?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！