Databases
StackOverflow2013
Postsdbo
POUsing JS or JQuery, move all in a selection from one list to "selected" using jQuery's listselect.js
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing JS or JQuery, move all in a selection from one list to "selected" using jQuery's listselect.js
    primarykey
    data
    text
    <p>I have a struts select section in a jsp file that becomes a standard HTML select:</p> <pre><code> &lt;s:select id="selectedTillsSelectId" name="selectedTillsSelectName" cssClass="tillDropDownEntryList" list="tillDropDownEntryList" listKey="key" listValue="value" value="%{selectedTills}" /&gt; </code></pre> <p>turns into </p> <pre><code>&lt;select name="selectedTillsSelectName" id="selectedTillsSelectId" class="tillDropDownEntryList"&gt; &lt;option value="1"&gt;0001&lt;/option&gt; &lt;option value="2"&gt;0002&lt;/option&gt; &lt;option value="3"&gt;0003&lt;/option&gt; &lt;option value="4"&gt;0004&lt;/option&gt; &lt;option value="5"&gt;0005&lt;/option&gt; &lt;option value="6"&gt;0006&lt;/option&gt; &lt;option value="7"&gt;0007&lt;/option&gt; &lt;option value="8"&gt;0008&lt;/option&gt; &lt;/select&gt; </code></pre> <p>My understanding is that struts merely populates the list, and it can be forgotten that struts is involved from that point.</p> <p>This then is displayed as a split list</p> <pre><code>All Selected 0001 0002 0003 0004 0005 0006 0007 0008 </code></pre> <p>Thanks to some listselect jquery:</p> <pre><code>&lt;script type="text/javascript" src="&lt;s:url value="/js/jQuery/jquery-1.4.2.min.js"/&gt;"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="&lt;s:url value="/js/jQuery/listselect.js"/&gt;"&gt;&lt;/script&gt; </code></pre> <p>This is all pre-existing working code I've been asked to amend. When you click on an individual item on the left, it moves into the "selected" column on the right. Clicking 0003 results in:</p> <pre><code>All Selected 0001 0003 0002 0004 0005 0006 0007 0008 </code></pre> <p><strong>I have been tasked with adding a button that moves everything over to the selected column, a "Select all" button.</strong></p> <p>I have added the button and this works ok, but I can't get it to do what I want. I can get the options into a list, and I can "select" them iteratively - but all this does is highlight the entry. I want to actually move the entry to the second column. Any attempts at calling click on the list items doesn't do anything or isn't valid, I've tried every permutation I can find in suggestions online, which may become apparent when you see the current state of my "select all" function: (please bear in mind, I've kept the commented out versions mostly to help remind me what I've tried, but I think they'll give a good indication to what I've had a go at)</p> <pre><code>function selectAllTills() { // alert("Select all the Tills..."); var bothLists = document.getElementsByTagName("select"); var unselectedList = bothLists[0]; var selectedList = bothLists[1]; var allOptions = unselectedList.getElementsByTagName("option"); for (var i=0; i &lt; allOptions.length; i++) { // allOptions[i].selected = true; // allOptions[i].attr('selected', 'selected'); // allOptions[i].selected = true; // $("#selectedTills").val(i).attr("selected","selected"); // alert("allOpions is" + allOptions[i]); // selectedList.val(allOptions[i]); $("#selectedTillsSelectId").val(allOptions[i]); } // $("#selectedTillsSelectId").find("option").appendTo(".tillDropDownEntryList"); //tried based on nnnnnn's suggestion // $("div#tillSelectionDiv select option").each(function(){ // $(this).attr("selected","selected"); // $(this).trigger("click"); // $(this).click(); // alert($(this)); // }); } </code></pre> <p>I guess it's at this point I confess to not really working with javascript much at this point. I'm a java programmer so understand OOP and I can read most of what I've seen in the page and it makes sense. Firebug suggests that the items I'm iterating over are HTMLElementOption which sounds about right, and using jQuery supposedly I can call "click" on the element but that didn't work... As mentioned above, iterating and setting selected <em>did</em> work in selecting the item, but it just makes the item blue on the left rather than moving it over, which I guess would be fine if this was a standard dropdown and not the jQuery listselect.</p> <p>Any assistance greatly received, if I've missed anything, please let me know in the comments so I can amend the question.</p> <p>Many thanks, Mitch.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMitch Kent
    1. USMitch Kent
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload