What do you recommend to do this type of nested selects? [closed]

Question

What do you recommend to do this type of nested selects? [closed]

Navigation

#1 by (1 votes)

0

I'm designing a pretty complex form, with enough sql queries inside.

I need to create many nested selects.

The case, I currently use "onchange .. this form submit" .. To send by POST the information from one to another.

The case, that I do not want the form to be sent every time I change a select, I would like that when I click, I will get the data asynchronously and be able to fill in the selects without having to send the whole form ..

There are many selects that are nested so I would like to know what kind of language they recommend me to use.

Thank you very much in advance.

php mysqli select formularios

asked by Javier Avila Fernandez 11.05.2018 в 18:55

source

1 answer

how does the AddResponse method work? How to add elements from a matrix in python

score 1 · Accepted Answer

You can do it with JQuery , I'll give you a simple example that I do with Estados and Condados where you select a state and in a Select different you display the counties corresponding to that state.

Description of the code: I have a form which in the Select of the states I previously sent the data to show all the states in that Select by means of PHP , in JQuery I say that if the SelectState changes then empty the SelectCounty and that same add the data that brings the query of getJSON , for this the URL that I am adding in the getJSON and returns me the data of Condados by means of the Value that has the SelectState .

Code HTML and PHP :

<form id="form" action="<?echo base_url('index/savePost')?>" method="post">
    <p class="spaceleft">State:</p>
    <div class="centered">
        <select id="selectState" class="select" name="form[state]" required>
            <option value="" disabled selected value>Select One</option>
            <?php foreach($States as $State){?>
                <option value="<?php echo $State['id']?>"><?php echo $State['name']?></option>
            <?php } ?>
        </select>
    </div>
    <p class="spaceleft">County:</p>
    <div class="centered">
        <select id="selectCounty" class="select" name="form[county]" disabled required>
            <option value="" disabled selected value>Select One</option>
        </select>
    </div>
    <div class="centeredlimit">
        <button type="submit" class="auto-style2">Send</button>
    </div>
</form>

Code JS :

$(document).ready(function(){
    var selectState = $('#selectState');
    var selectCounty = $('#selectCounty');

    selectState.change(function() {
        selectCounty.empty();
        selectCounty.append('<option value="" disabled selected value>Select One</option>');
        $.getJSON('<?php echo base_url('Index/getCountiesJson?id=')?>'+selectState.val(),function(data){
            $.each(data.Counties, function(index,value){
                selectCounty.append('<option value="'+value.id+'">'+value.name+'</option>');
            });
            selectCounty.prop('disabled', false);
        });
    });

});

In this case I have only the SelectState activated and the other SelectCounty I have it in Disabled that's why I use selectCounty.prop('disabled', false); so that it is now active Select .