Databases
StackOverflow2013
Postsdbo
POjQuery filter a list using multiple select boxes
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery filter a list using multiple select boxes
    primarykey
    data
    text
    <p>I need to be able to filer a long list on the client side using multiple select boxes.</p> <p>I have managed to do this successfully using one select box. </p> <pre><code>&lt;select id="company"&gt; &lt;option selected="true" &gt;ALL&lt;/option&gt; &lt;option&gt;GM&lt;/option&gt; &lt;option&gt;Honda&lt;/option&gt; &lt;option&gt;Ford&lt;/option&gt; &lt;/select&gt; &lt;select id="company2"&gt; &lt;option selected="true" &gt;ALL&lt;/option&gt; &lt;option&gt;Buick [GM]&lt;/option&gt; &lt;option&gt;Honda&lt;/option&gt; &lt;option&gt;Ford&lt;/option&gt; &lt;/select&gt; &lt;ul id="names" multiple="multiple" size="8"&gt; &lt;li&gt;Chevy [GM]&lt;/li&gt; &lt;li&gt;Buick [GM]&lt;/li&gt; &lt;li&gt;Civic [Honda]&lt;/li&gt; &lt;li&gt;Accord [Honda]&lt;/li&gt; &lt;li&gt;Focus [Ford]&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>And the script</p> <pre><code> var names = $('#names li').clone(); $('#company').change(function() { var val = $(this).val(); $('#names').empty(); names.filter(function(idx, el) { return val === 'ALL' || $(el).text().indexOf( val ) &gt;= 0; }).appendTo('#names'); $('#company2').change(function() { var val = $(this).val(); $('#names').empty(); names.filter(function(idx, el) { return val === 'ALL' || $(el).text().indexOf(val) &gt;= 0; }).appendTo('#names'); }); }); </code></pre> <p>This nearly works, I can select GM in the first select box and the list will change the <code>&lt;li&gt;</code> to</p> <ul> <li>Chevy [GM]</li> <li>Buick [GM]</li> </ul> <p>If I then use the second select box to select <code>Buick [GM]</code> the <code>&lt;li&gt;</code> will change to just display</p> <ul> <li>Buick [GM]</li> </ul> <p>Which is what I want. However I have found if the second box selects Honda it will display </p> <ul> <li>Civic [Honda]</li> <li>Accord [Honda]</li> </ul> <p>My question is how can I chain the two together so it will use both GM and Honda together? </p> <p>The list with out any filters is:</p> <ul> <li>Chevy [GM]</li> <li>Buick [GM]</li> <li>Buick [GM]</li> <li>Buick [GM]</li> <li>Civic [Honda]</li> <li>Accord [Honda]</li> <li>Focus [Ford]</li> </ul> <p>​When we select GM from the first filter it displays</p> <ul> <li>Chevy [GM]</li> <li>Buick [GM]</li> <li>Buick [GM]</li> <li>Buick [GM]</li> </ul> <p>so if we select 'Buick [GM]' form the second filter the list now displays </p> <ul> <li>Buick [GM]</li> <li>Buick [GM]</li> <li>Buick [GM]</li> </ul> <p>which is correct, but the second filter is set to Ford the list will display</p> <ul> <li>Focus [Ford]</li> </ul> <p>so the filters are not working together ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USJoseph Silber
    1. USJason Bruce
    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
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POjQuery filter a list using multiple select boxes
      1. This table or related slice is empty.
      1. VTDownMod
    2. VO
      singulars
      1. POjQuery filter a list using multiple select boxes
      1. This table or related slice is empty.
      1. VTUpMod
    1. COI don't really understand what your after. Could you explain in more detail?
      singulars
      1. POjQuery filter a list using multiple select boxes
      1. USsQVe
 

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