Hello everyone!

I'm back again with another problem. I'm trying to create a bunch of filters with the code given in another topic but I would like to implement "relations" inside the "Country", the "City" and the "Local" parameters.

I've tried a lot of examples that i've found on the forum but every time I try to create the relation between the "Country" and the "City", the "City" disappears and won't show again.

Please help!!

Code: Select all

<div id="quick-search" style="float:right; margin-right:50px;">

   <cms:form name="quicksearch" id="quicksearch" anchor='0'>
      <cms:if k_success >
         
         <cms:if frm_country!='-' >
            <cms:set my_search_str="<cms:concat my_search_str ' | country==' frm_country />"  scope='global'/>
         </cms:if>
          
          <cms:if frm_city!='-' >
            <cms:set my_search_str="<cms:concat my_search_str ' | city==' frm_city />"  scope='global'/>
         </cms:if>        
      </cms:if>
      
      <div>
         <label>Country</label>
          <cms:input onchange="this.form.submit()" type="dropdown" opt_values='=- | Aveiro | Setúbal' opt_selected='-' name="country" id="country" />
      </div>
       <div>
         <label>City</label>
          <cms:input onchange="this.form.submit()" type="dropdown" opt_values='=- | Arera Colony | M P Nagar | Old City | Karond' opt_selected='-' name="city" id="city" />
      </div> 
    </cms:form>
</div>
<script>$('#quicksearch').change(function(){$(this).closest('form').trigger('submit');});</script>

Thank you!

Shouldn't this work?

Code: Select all

<div>
         <label>Country</label>
          <cms:input onchange="this.form.submit()" type="dropdown" opt_values='=- | Aveiro | Setúbal' opt_selected='-' name="country" id="country" />
      </div>
       <div>
         <label>Concelho</label>
           <cms:if country = '-' >
               <cms:else />
               <cms:if country = 'Aveiro' >
                   <cms:input onchange="this.form.submit()" type="dropdown" opt_values='=- | Arera Colony | M P Nagar | Old City | Karond' opt_selected='-' name="city" id="city" />
                   <cms:else />
                   <cms:if country = 'Setúbal' >
                       <cms:input onchange="this.form.submit()" type="dropdown" opt_values='=- | Barreiro' opt_selected='-' name="city" id="city" />
                       <cms:else />
                   </cms:if>
               </cms:if>
           </cms:if>
      </div>

Adding to the solution explained in the topic https://www.couchcms.com/forum/viewtopic.php?f=8&t=7620&p=23315&hilit=%24+%27%23quicksearch%27+#p24258, I've added the code from https://www.couchcms.com/forum/viewtopic.php?f=4&t=8328 to create a Multilevel Dependent Dropdown.

For this to work, there's the need to create the "country.php", "district.php", "local.php", adding pages with the same name of country's, district's and local's that you'll need to add in the <script> list below.

Code: Select all

<cms:if k_success >
          
          <cms:if frm_country!='-' >
            <cms:set my_search_str="<cms:concat my_search_str ' | country==' frm_country />"  scope='global'/>
         </cms:if>
          
          <cms:if frm_district!='-' >
            <cms:set my_search_str="<cms:concat my_search_str ' | district==' frm_district />"  scope='global'/>
         </cms:if>
          
          <cms:if frm_local!='-' >
            <cms:set my_search_str="<cms:concat my_search_str ' | local==' frm_local />"  scope='global'/>
         </cms:if>
          
      </cms:if>
       
       <cms:hide>
           <cms:input type="dropdown" name="country" id="country" />
           <cms:input type="dropdown" name="district" id="district" />
           <cms:input type="dropdown" name="local" id="local" />
       </cms:hide>

<div>
           <label>Country</label>
           <select name="country" id="stateSel" size="1" >
               <option value="-" selected="selected"> </option>
           </select>
       </div>
       <div>
           <label>District</label>
           <select name="district" id="countySel" size="1" >
               <option value="-" selected="selected">Select Country First</option>
           </select>
       </div>
       <div>
           <label>Local</label>
           <select name="local" id="citySel" size="1" onchange="this.form.submit()">
               <option value="-" selected="selected">Select district First</option>
           </select>
       </div>

<button onchange="this.form.submit()">Search</button>

<script>
var stateObject = {
    "Country1": {
        "District1-1": ["Local1-1-1", "Local1-1-2"],
        "District1-2": ["Local1-2-1", "Local1-2-2"]
    },
    
    "Country2": {
        "District2-1": ["Local2-1-1", "Local2-1-2"],
        "District2-2": ["Local2-2-1", "Local2-2-2"]
    }

}
}


window.onload = function () {
    var stateSel = document.getElementById("stateSel"),
        countySel = document.getElementById("countySel"),
        citySel = document.getElementById("citySel");
    for (var state in stateObject) {
        stateSel.options[stateSel.options.length] = new Option(state, state);
    }
    stateSel.onchange = function () {
        countySel.length = 1; // remove all options bar first
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) return; // done   
        var cities = stateObject[stateSel.value][this.value];
        for (var i = 0; i < cities.length; i++) {
            citySel.options[citySel.options.length] = new Option(cities[i], cities[i]);
        }
    }
}
</script>

<script>$('#quicksearch').change(function(){$(this).closest('form').trigger('submit');});</script>

A special Thank You for all the help that Trendoman gave to accomplish this part!