Hi,
I am doing a dropdown list using conditional fields but there are some problems I don't know how to do?
Currently I have to make the number of conditional lines equal to the number of counties I have.
Is there any method for me to update the value in custom_field when I change the value of city?
Can you help me, please?

Code: Select all

    
<cms:editable 
        type='dropdown' 
        name='my_city_region' 
        label='Select City' 
        opt_values=
"Chọn tỉnh/thành phố=-|<cms:pages masterpage='the-city.php'><cms:show k_page_title />=<cms:show k_page_name/>|</cms:pages>" 
        required='1'
    />
    <cms:func _into='my_city' my_city_region=''>
        <cms:if my_city_region='ho-chi-minh'>show<cms:else />hide</cms:if>
    </cms:func>
    <cms:editable name="ditrict"
    label="Quận/Huyền"
    opt_values=
"Chọn quận/huyện=-|<cms:pages masterpage='the-district.php' custom_field="take=ho-chi-minh"><cms:show k_page_title />=<cms:show k_page_name/>|</cms:pages>"
    type='dropdown'
    not_active=my_city
    />    
    <cms:func _into='my_city' my_city_region=''>
        <cms:if my_city_region='long-an'>show<cms:else />hide</cms:if>
    </cms:func>
    <cms:editable name="ditrict"
    label="Quận/Huyền"
    opt_values=
"Chọn quận/huyện=-|<cms:pages masterpage='the-district.php' custom_field="take=long-an"><cms:show k_page_title />=<cms:show k_page_name/>|</cms:pages>"
    type='dropdown'
    not_active=my_city
    />    
    <cms:func _into='my_city' my_city_region=''>
        <cms:if my_city_region='dong-nai'>show<cms:else />hide</cms:if>
    </cms:func>
    <cms:editable name="ditrict"
    label="Quận/Huyền"
    opt_values=
"Chọn quận/huyện=-|<cms:pages masterpage='the-district.php' custom_field="take=dong-nai"><cms:show k_page_title />=<cms:show k_page_name/>|</cms:pages>"
    type='dropdown'
    not_active=my_city
    />    

[trendoman]

My solution: use only one "district" dropdown with empty opt_values and if any non-empty city is selected make it visible. Read value of selected city dynamically in a javascript and populate district dropdown from a static js-array "city-district". This will be an automatic solution with just 2 editable fields and a bit of extra js.

Hi @trendoman,

Can you show me the js that you mentioned or can you give me a comment about the js that I have used?
I'm very sorry for bothering you but the js that I added did not produce the correct results

Thanks you very much,

Solution 1: Everything works fine in the admin page but when outputting to the front-end it only displays the value in "value".

Code: Select all

<cms:template title='' clonable='1' parent=''>
<cms:config_form_view>
<cms:script>
var $select1 = $( '#f_my_city_region' ),
   $select2 = $( '#f_my_district_region' ),
    $options = $select2.find( 'option' );
    
$select1.on( 'change', function() {
   $select2.html( $options.filter( '[value="' + this.value + '"]' ) );
} ).trigger( 'change' );
</cms:script>
</cms:config_form_view>
<cms:editable 
        type='dropdown' 
        name='my_city_region' 
        label='Chọn thành phố' 
        opt_values=
"Chọn tỉnh/thành phố=-|<cms:pages masterpage='the-city.php'><cms:show k_page_title />=<cms:show k_page_name/>|</cms:pages>" />
<cms:editable 
        type='dropdown' 
        name='my_district_region' 
        label='Chọn Quận' 
        dynamic='opt_values'
        opt_values="Chọn Quận/Huyện=-|<cms:pages masterpage='the-district.php'><cms:show k_page_title />=<cms:related_pages 'take'>
<cms:show k_page_name/></cms:related_pages>|</cms:pages>" />
</cms:template>

Solution 2: After saving all values ​​are not saved

Code: Select all

<template>
<cms:config_form_view>
<cms:script>
var stateObject = {
    "California": {
        "Monterey": ["Salinas", "Gonzales"],
        "Alameda": ["Berkeley"]
    },
    "Oregon": {
        "Douglas": ["Roseburg", "Winston"],
    }
}
window.onload = function () {
    var stateSel = document.getElementById("f_my_city_region"),
        countySel = document.getElementById("f_my_county_region"),
        citySel = document.getElementById("f_my_ward_region");
    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) {
          countySel.options[0].text = "Please select state first"
          citySel.options[0].text = "Please select county first"
          return; // done   
        }  
        countySel.options[0].text = "Please select county"
        for (var county in stateObject[this.value]) {
            countySel.options[countySel.options.length] = new Option(county, county);
        }
        if (countySel.options.length==2) {
          countySel.selectedIndex=1;
          countySel.onchange();
        }  
        
    }
    stateSel.onchange(); // reset in case page is reloaded
    countySel.onchange = function () {
        citySel.length = 1; // remove all options bar first
        if (this.selectedIndex < 1) {
          citySel.options[0].text = "Please select county first"
          return; // done   
        }  
        citySel.options[0].text = "Please select city"
        
        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]);
        }
        if (citySel.options.length==2) {
          citySel.selectedIndex=1;
          citySel.onchange();
        }  
        
    }
}
</cms:script>
</cms:config_form_view>
<cms:editable name='my_city_region' type='dropdown'
opt_values='Select state |'/>
<cms:editable name='my_county_region' type='dropdown'
opt_values=''/>
<cms:editable name='my_ward_region' type='dropdown'
opt_values=''/>
</template>

[trendoman]

Mm.. There is no such or similar example in my library, never had a request like that. However, shouldn't be difficult.

I am currently working on something else, but maybe somebody will also find time to post in forum and provide a working code.. Especially if you have a license recently purchased, I belive @KK must answer your support request...


P.S. If a value is not saved, it may be because opt_values is empty. I could have been wrong about it.

Thank you very much, @trendoman.