Note that there are some explanatory texts on larger screens.

plurals
  1. POJavascript action based on multiple possible DIV contents
    primarykey
    data
    text
    <p>I need help writing a javascript filter for a page that is changing depending on city and state. The state options are provided as a single select dropdown and the cities are presented as checkboxes (i.e. multiple cities can be selected). All DIVs (parent DIV containing one city DIV and one state DIV) contain the city and state name in their respective DIVs like this:</p> <pre><code>&lt;div class='row'&gt; &lt;div class='state'&gt;Alabama&lt;/div&gt; &lt;div class='city'&gt;Anniston&lt;/div&gt; &lt;/div&gt; </code></pre> <p>These are initially loaded on the page and then hidden based on the initial filter (state='AL' city='all'). When the user changes the filter either by selecting a new state or checking/unchecking a city, it triggers a javascript function that re-evaluates which DIVs are hidden and which are shown. </p> <p>The state filter works great using:</p> <pre><code>$(".parent").hide(); $(".state:contains('" + state + "')").parent().show(); </code></pre> <p>to display all the parent DIVs that match the state passed to the function. I am having problems with the city select. I want the user to be able to select multiple cities so I need some way to show all the parent DIVs where the city DIV matches any of the selected cities AND still match the state also. I am starting by hiding all DIVs, then showing the matching states, then trying to hide the non-matching cities. Something like:</p> <pre><code>$(".parent").hide(); $(".state:contains('" + state + "')").parent().show(); $(".city:not(:contains('" + [city1 OR city2 OR city3 OR ...] + "'))").parent().hide(); </code></pre> <p>Obviously the [city1 OR city2 OR city3 OR ...] part doesn't work. Any suggestions on how to get this working with multiple inputs like this?</p> <p>Thanks!</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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.
 

Querying!

 
Guidance

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