Interaction between two selects

[Константин Комков]

Is there way create interaction between two selects in SQLFORM. 

I have these tables in tables.py:

db.define_table(
    'categories',
    Field('PRIORITY','integer'),
    migrate=False)

db.define_table(
    't_categories_names',
    Field('ID_CATEGORY','reference categories',writable=False,readable=False),
    Field('LANGUAGE','reference languages'),
    Field('NAME',length=30),
    primarykey=['ID_CATEGORY'],
    migrate=False)

db.define_table(
    'subcategories',
    Field('ID_CATEGORY','reference categories'),
    migrate=False)

db.define_table(
    't_subcategories_names',
    Field('ID_SUBCATEGORY','reference subcategories'),
    Field('LANGUAGE','reference languages'),
    Field('NAME',length=30,unique=True),
    primarykey=['ID_SUBCATEGORY'],
    migrate=False)

db.define_table(
    'recipes',
    Field('ID_SUBCATEGORY','reference subcategories'),
    Field('IMAGE','upload'),
    migrate=False)

I use SQLFORM with extra field for 'category' in controller default.py:

def addRecipe():
    db.recipes.ID_SUBCATEGORY.requires = IS_IN_DB(db((db.t_subcategories_names.ID_SUBCATEGORY == db.subcategories.id) & (db.t_subcategories_names.LANGUAGE == auth.user.language)),db.t_subcategories_names.ID_SUBCATEGORY,'%(NAME)s')
    categories = {rec.categories.id:rec.t_categories_names.NAME for rec in db((db.categories.id == db.t_categories_names.ID_CATEGORY) & (db.t_categories_names.LANGUAGE == auth.user.language)).select(db.categories.id,db.t_categories_names.NAME,orderby=db.categories.PRIORITY)}


    form = SQLFORM(db.recipes,fields=['ID_SUBCATEGORY','IMAGE'],labels = {'ID_SUBCATEGORY':T('Subcategory'),'IMAGE':T('Image')})
    my_extra_element = DIV(
        LABEL(
            T('Category'),
            _class='form-control-label col-sm-3'
        ),
        DIV(
            SELECT(
                *[OPTION(value_, _value=key_) for key_, value_ in iter(categories.items())],
                _class='form-control'
            ),
            _class='col-sm-9'
        ),
        _class='form-group row'
    )
    form[0].insert(0,my_extra_element)
    if form.process().accepted:
        response.flash='Thanks for filling the form'
    return dict(form=form)

I have result like on picture. As you can see if user have choosen 'Drinks' select with subcategory contain all names for all categories.

P.S. I can do interaction between two selects with jquery, but I want to know is there way do it with web2py tools like widget maybe with autocomplete or options.widget.

[villas]

Maybe one of these will help:

https://www.jqueryscript.net/tags.php?/Cascading%20Dropdown/

https://github.com/scubism/sqlabs/blob/master/modules/plugin_lazy_options_widget.py
http://www.web2pyslices.com/slice/show/1724/cascading-dropdowns-simplified
http://www.web2pyslices.com/slice/show/1503/vvmselectwidget-dropdown-chain-cascade-widget
https://stackoverflow.com/questions/8146260/best-practice-for-populating-dropdown-based-on-other-dropdown-selection-in-web2p/8152910#8152910

[Константин Комков]

Thank you! I realised it using array, which I transferred in JS, like that:

subcategoryArr = '['

    for row in rows:

        subcategoryArr += '[' + str(row.id) + ',' + str(row.ID_CATEGORY) + '],'

    subcategoryArr = subcategoryArr[0:-1]+']'

where row.id is ID of my subcategory.

View:

<script>
    var subcategory;
    {{=ASSIGNJS(subcategory = subcategoryArr)}};
    subcategory = JSON.parse(subcategory);
</script>
<script src="{{=URL('static', 'js/subcategoryWidjet.js')}}"></script>

And subcategoryWidjet.JS:

$(function() {
 for (var k = 0; k < $("#recipes_ID_SUBCATEGORY")[0].childNodes.length; k++) {
 $($("#recipes_ID_SUBCATEGORY")[0].childNodes[k]).css('display', 'none');
 }
 
 for (var i = 0; i < subcategory.length; i++) {
 if (subcategory[i][1]==$("#category").val()) {
 for (var k = 0; k < $("#recipes_ID_SUBCATEGORY")[0].childNodes.length; k++) {
 if ($($("#recipes_ID_SUBCATEGORY")[0].childNodes[k]).val() == subcategory[i][0]) {
 $($("#recipes_ID_SUBCATEGORY")[0].childNodes[k]).css('display', 'block');
 }
 }
 }
 }
 
 $("#category").on("change", function(){
 //hide all
 for (var k = 0; k < $("#recipes_ID_SUBCATEGORY")[0].childNodes.length; k++) {
 $($("#recipes_ID_SUBCATEGORY")[0].childNodes[k]).css('display', 'none');
 }
 
 for (var i = 0; i < subcategory.length; i++) {
 if (subcategory[i][1]==$("#category").val()) {
 for (var k = 0; k < $("#recipes_ID_SUBCATEGORY")[0].childNodes.length; k++) {
 if ($($("#recipes_ID_SUBCATEGORY")[0].childNodes[k]).val() == subcategory[i][0]) {
 $($("#recipes_ID_SUBCATEGORY")[0].childNodes[k]).css('display', 'block');
 }
 }
 }
 }
 });
});