Home » Jquery » selecteditem – jQuery getting value of selected item when returning to page with back button-Exceptionshub

selecteditem – jQuery getting value of selected item when returning to page with back button-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have 3 selects on my page.
When I choose some options on the first 2 selects, the third one gets populated.
It’s working great with jquery.

Here’s the HTML :

<form action="results.php" method="get">
<select name="cible[]" id="cible" class="kii-select-cible">
    <option value="">Je suis</option>
    <option value="52">Demandeur d’emploi</option>
    <option value="51">Entreprise / Organisation</option>
</select>
<select name="diplome[]" id="diplome" class="kii-select-diplome">
    <option value="">Je recherche</option>
    <option value="61">Diplôme Universitaire</option>
    <option value="59">Doctorat</option>
</select>
<select name="domaine[]" id="domaine" class="kii-select-domaine">
    <option value="">Domaine</option>
</select>

<input id="search-button" name="search-button" value="Trouver" type="submit">
<div id="dom_values" style="display: none">
    <div id="cib_dip_52_59_1">
        <div class="dom_id">71</div>
        <div class="dom_label">MAE - Double compétences</div>
    </div>
    <div id="cib_dip_52_59_2">
        <div class="dom_id">67</div>
        <div class="dom_label">Management - Stratégie</div>
    </div>

    <div id="cib_dip_52_59_3">
        <div class="dom_id">69</div>
        <div class="dom_label">Management de l'Innovation</div>
    </div>
    <div id="cib_dip_52_59_4">
        <div class="dom_id">68</div>
        <div class="dom_label">Management par projets</div>
    </div>
</div>
</div>

I have a function called displaySelectDomain and this function gets called whenever the user changes the selected item in one of the 2 selects :

    $('#cible').change(function () {
    displaySelectDomain();
});
$('#diplome').change(function () {
    displaySelectDomain();
});

Here’s the content of the function, basically it recreates an array from the HTML content that’s hidden on the page, and it can reconstruct the select, depending on the user choices :

    function displaySelectDomain() {
    var selectedPublic = $('#cible').children("option:selected").val();
    var selectedDiplome = $('#diplome').children("option:selected").val();
    var selectDomaineOptions = '<option value="">Domaine</option>';
    $('#domaine').empty().append(selectDomaineOptions);
    if (selectedPublic > 0 && selectedDiplome > 0) {
        selectDomaineOptions = '';
        for (var i = 0; i < dom_array.length; i++) {
            var dom_values = dom_array[i];
            if (dom_values.cib_id == selectedPublic && dom_values.dip_id == selectedDiplome) {
                selectDomaineOptions = '<option value="' + dom_values.domaine.id + '">' + dom_values.domaine.label + '</option>';
                $('#domaine')
                    .append(selectDomaineOptions)
                ;
            }
        }
    }
}

Then I validate the form and get redirected to another page.

When I click on the back button, the selected items are still selected but for some reason, jquery returns always 0 as selected item.

So when the function displaySelectDomain is called on page load, it does nothing, while the selects don’t have their default value selected.

Could you please help me ?
I tried to get the selected value in different ways but it always returns 0 and I don’t understand why.

Thanks for your help.

How to&Answer: