How to get my javascript to search for a class or something other than val

Question

I have a javascript script that searches for a value and a drop-down menu and modifies the next drop-down menu based on what that value is, however this will not work for me anymore since I need to pass the value back to ruby ​​so that I can save it to 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> 

Thanks for any help, I'm pretty new to Javascript and trying my best, but I still need to be guided.

Answer 1

Well, I figured out how to return my results and save the value in my code, so nothing breaks here, as I did.

 $(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'); }); 

it should be in erb im using this in

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

So, now I can transfer any text in my versions to ruby, for example ... "Hey, here I am"

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

Answer 2

In accordance with what I understood. You want to send the data selected in the first drop-down list in ruby ​​to save it in the session. If this is the case, with each choice, you can call the AJAX using cookies and update the session object accordingly, and then also display it in the second drop-down list.

Although, onChange AJAX is not a good suggestion, in this case you can save the selected parameter in the sessionStorage browser and then add it to the session object with one ajax to your server at the end of the selection cycle (drop-down list).