Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You should combine the event handler for both <code>select</code> elements:</p> <pre><code>var $names = $('#names'), $namesAll = $names.find('li'), $company1 = $('#company'), $company2 = $('#company2'); $company1.add( $company2 ).change(function() { var val1 = $company1.val(), val2 = $company2.val(); $names.empty(); if ( val1 == 'ALL' &amp;&amp; val2 == 'ALL' ) { $names.append( $namesAll ); } else { $namesAll.filter(function(i, el) { var $el = $(el); return ~$el.text().indexOf( val1 ) || ~$el.text().indexOf( val2 ); }).appendTo( $names ); } });​ </code></pre> <p>Here's the fiddle: <a href="http://jsfiddle.net/EfEYQ/" rel="nofollow">http://jsfiddle.net/EfEYQ/</a></p> <hr> <p>The above solution works, but I'd advise you not to mess with the DOM so much. Instead, you should have a <code>hidden</code> class in your CSS, then just toggle that class on the <code>li</code>s you want to show:</p> <pre><code>var $names = $('#names li'), $company1 = $('#company'), $company2 = $('#company2'); $company1.add( $company2 ).change(function() { var val1 = $company1.val(), val2 = $company2.val(); if ( val1 == 'ALL' &amp;&amp; val2 == 'ALL' ) { $names.removeClass('hidden'); } else { $names.addClass('hidden').filter(function(i, el) { var $el = $(el); return ~$el.text().indexOf( val1 ) || ~$el.text().indexOf( val2 ); }).removeClass('hidden'); } });​ </code></pre> <p>Here's the fiddle: <a href="http://jsfiddle.net/89qbV/" rel="nofollow">http://jsfiddle.net/89qbV/</a></p> <hr> <p>After further clarification in the comments, I think this might be what you're looking for:</p> <pre><code>var $names = $('#names li'), $company1 = $('#company'), $company2 = $('#company2'); $company1.add( $company2 ).change(function() { var val1 = $company1.val(), val2 = $company2.val(); if ( val1 == 'ALL' &amp;&amp; val2 == 'ALL' ) { $names.removeClass('hidden'); } else { $names.addClass('hidden').filter(function(i, el) { var $el = $(el), include = true; if ( val1 != 'ALL' &amp;&amp; !~$el.text().indexOf( val1 ) ) include = false; if ( val2 != 'ALL' &amp;&amp; !~$el.text().indexOf( val2 ) ) include = false; return include; }).removeClass('hidden'); } });​ </code></pre> <p>Here's the fiddle: <a href="http://jsfiddle.net/WfNav/" rel="nofollow">http://jsfiddle.net/WfNav/</a></p>
    singulars
    1. This table or related slice is empty.
    1. POjQuery filter a list using multiple select boxes
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USJoseph Silber
    1. USJoseph Silber
    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. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COThat's great I should of really posted the fidle instead off all the code. However your solution lets me still select honda after selecting GM.
      singulars
      1. PO
      1. USJason Bruce
    2. CO@JasonBruce - Isn't that what you want?
      singulars
      1. PO
      1. USJoseph Silber
    3. CONo, I should only be able to filter the results down further i.e after GM is selected and Honda is selected after GM then the list should not update. It should only update if an option shown in the new list is selected
      singulars
      1. PO
      1. USJason Bruce
 

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