How to get my javascript to look for class or anything other than val

Question

I have a javascript script that looks for the value and of dropdown and changes the next dropdown menu based on what the value is, however this will no longer work for me as i need to pass the value back to ruby so i can save it in sessions.

$(document).ready(function() {
    $('#Exposures').bind('change', function() {
        var elements = $('div.exposures').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if something is selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');
    
    $('.second-level-select').bind('change', function() {
        var elements = $('div.second-level-container').children().hide(); // hide all the elements
        var value = $(this).val();

        if (value.length) { // if something is selected
            elements.filter('.' + value).show(); // show the ones we want
        }
    }).trigger('change');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select class="pmmargin3 exp" size="1" id="Exposures" title="" name="exposures_pt1">
    <option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
    <option value="1">thing1</option>
    <option value="1">thing2</option>
    <option value="2">thing3</option>
    <option value="1">thing4</option>
    <option value="3">thing5</option>
 
    </select>

    <div class="container exposures leftmargin exp">
    <div class="1">
        <select class="second-level-select" name="exposures_pt2a">
            <option selected disabled hidden style='display:none' value=''>-     Please select an option-</option>
            <option value="guardrail_system">thing1</option>
            <option value="personal_fall">thing2</option>
            <option value="safety_net">thing3</option>
        </select>
    </div>
    <div class="2">
        <select class="second-level-select" name="exposures_pt2b">
            <option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
            <option value="guardrail_system">thing1</option>
            <option value="personal_fall">thing2</option>
            <option value="safety_net">thing3</option>
            <option value="infeasibility_option">thing4</option>
        </select>
    </div>
    <div class="3">
        <select class="second-level-select" name="exposures_pt2c">
            <option selected disabled hidden style='display:none' value=''>-Please select an option-</option>
            <option value="current_subpart">thing5</option>
            <option value="proposed_subpart">thing6</option>
        </select>
    </div>
  </div>

Thank you for any help, I'm fairly new to Javascript and am trying my best but still need some guidance.

Answer 1

As per what I understood. You want to send data selected in first dropdown to ruby to save it in Session. If that is the case, on every select you can trigger AJAX call with cookies and update the session object accordingly and also subsequently display it in second dropdown as well.

Though, onChange AJAX is not a really good suggestion, in that scenario you can save selected option into browser sessionStorage and later add it to session object by a single ajax to your server at the end of your selection(dropdown) cycle.

Answer 2

Well i figured out how to get my results back and keep the value the same in my code so nothing else breaks here is how i did it.

$(document).ready(function() {
$('#Exposures').bind('change', function() {
    var elements = $('div.exposures').children().hide(); // hide all the elements
    var value = $(this).val();
    *added* var exposuredd = document.getElementById("Exposures");
    *added*  var selectedText = exposuredd.options[exposuredd.selectedIndex].text;
 *added*   document.getElementById("exp1").innerHTML="<input type='text' name='exposures_pt1' value='"+selectedText+"' >";

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');

$('.second-level-select').bind('change', function() {
    var elements = $('div.second-level-container').children().hide(); // hide all the elements
    var value = $(this).val();

    if (value.length) { // if somethings' selected
        elements.filter('.' + value).show(); // show the ones we want
    }
}).trigger('change');

});

this needs to be in the erb im using this in

<p hidden  id="exp1"></p>

So now i can pass whatever text is in my options to ruby such as...."Hey Here I am"

 <option value="1">Hey Here I am</option>