result show/hide option value in dropdown2 after selecting item from checkbox1 and selecting item from dropdown1

Question

i want to select a platform from checkbox1 and select the value from dropdown1 as a result i want in dropdown2 it shows the value related to the platfrom

example : i check GI and 90 >> result in dropdown2 = 90 gi if i check GI and xdo 190 >> result : 190 gi and 190 xdo

and would love that the value appear in the textbox 'lns'.

i tried some code but not working properly :

<script>
$(document).ready(function()
{$('option[id^=sb]').hide();
$('input[id^=chk]').change(function(){
var index = $(this).attr('id').replace('chk','');
if($(this).is(':checked'))
$('#sb'+index).show();
else
$('#sb'+index).hide();
});   });   

$(function(){
$("#dropdown1").on("change",function(){
var levelClass = $('#dropdown1').find('option:selected').attr('class');
console.log(levelClass);
$('#dropdown2 option').each(function () {
var self = $(this);
if (self.hasClass(levelClass) || typeof(levelClass) == "undefined") {
self.show();
} else {
self.hide();
}});   });});

function chlink(){
var dropdown2 = document.getElementById('dropdown2');
var a = dropdown2.options[dropdown1.selectedIndex].value;
var textbox = document.getElementById('lns');
 textbox.value = a; }

Any Help :)

Answer 1

This should work

 $(document).ready(function(){ $('.chlink').on('click', function(){ gatherValuesFromInputs(); }); }); function gatherValuesFromInputs() { var result = ''; $('.chk:checked').each(function(index){ if(index == 0) { result += $('#dropdown').val() + " " + $(this).val(); } else { result += ' and ' + $('#dropdown').val() + " " + $(this).val(); } }); $('#lns').val(result); } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <div class="row"> <div class="column"> <div style="float:right"> <label for="option1">Xdo</label> <input class="chk" id="option1" type="checkbox" name="option1" value="xdo"> </div> <div style="float:right"> <label for="option2">GI</label> <input class="chk" id="option2" type="checkbox" name="option2" value="gi"> </div> <div style="float:right"> <label for="option3">PayF</label> <input class="chk" id="option3" type="checkbox" name="option3" value="PayF"> </div> <div style="float:right"> <label for="option4">HiP</label> <input class="chk" id="option3" type="checkbox" name="option4" value="HiP"/> </div> </div> </div> <br> <select id="dropdown" name="dropdown"> <option>choisissez un Pack</option> <option value="90"> LIEN 90 </option> <option value="190"> LIEN 190 </option> </select> <br><br> <button class="chlink">Generer Lien</button> <p><input name="lns" id="lns" type="text" /></p> 

Answer 2

You can store checkboxes value to an array and whenever a checkbox is checked you can display values related to it and whenever a checkbox is unchecked hide the data related to it . Also i have made some changes in your html as well in script.Working example :

 var index = []; $(document).ready(function() { //hide all contents $('option[id^=sb]').hide(); $('input[id^=chk]').change(function() { //checking if checkbox is check put it in array if ($(this).is(':checked')) { index.push($(this).attr('id').replace('chk_', '')); } else { //if uncheck remove the element from array if ((index1 = index.indexOf($(this).attr('id').replace('chk_', '')) !== -1)) { //hide all options related to that for (var i = 0; i < index.length; i++) { if (!$('#chk_' + index[i]).prop("checked")) { //hide option $('.' + index[i]).hide(); } } //removing values from array index.splice($.inArray(index1, index), 1); } } //if check box is checked show options related to that for (var i = 0; i < index.length; i++) { if ($('#chk_' + index[i]).prop("checked")) { $('.' + index[i]).show(); } } }); $(function() { $("#dropdown1").on("change", function() { var levelClass = $('#dropdown1').find('option:selected').attr('class'); //looping through array for (var i = 0; i < index.length; i++) { $('#dropdown2 option').each(function() { var self = $(this); if (self.val() == levelClass || typeof(levelClass) == "undefined" && self.hasClass(levelClass)) { //self.show(); //showing option with class and value from array $('.' + levelClass + '.' + index[i]).show(); } else { //self.hide(); //hiding options $('.' + index[i]).not('.' + levelClass).hide(); } }); } }); }); //on click of Generer Lien button $(".values").on("click", function() { //getting values of dropdown var v = $("#dropdown2").val(); //assign to input $("#lns").val(v); }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <div class="row"> <div class="column"> <div style="float:right"> <label for="option1">Xdo </label> <input id="chk_xdo" type="checkbox" name="chb[]" value="xdo" autocomplete="on"> </div> <div style="float:right"> <label for="option2">GI</label> <input id="chk_gi" type="checkbox" name="chb[]" value="gi"> </div> <div style="float:right"> <label for="option3">PayF</label> <input id="chk_payf" type="checkbox" name="chb[]" value="PayF"> </div> <div style="float:right"> <label for="option4">HiP</label> <input id="chk_hip" type="checkbox" name="chb[]" value="HiP" /> </div> </div> </div> <br> <select id="dropdown1" name="dropdown1"> <option value="">choisissez un Pack</option> <option class="490" value="490"> 490,00 </option> <option class="390" value="390"> 390,00 </option> <option class="290" value="290"> 290,00 </option> <option class="190" value="190"> 190,00 </option> <option class="90" value="90"> 90,00 </option> </select> <br> <select id="dropdown2" name="dropdown2"> <option></option> <option style="color:#0bb6b6" class="90" value="90">LIEN 90</option> <option id="sb1" class=" xdo 90" value="xdo90">90 xdo</option> <option id="sb2" class=" gi 90" value="gi90">90 gi</option> <option id="sb3" class=" hip 90" value="hip90">90 hip</option> <option style="color:#0bb6b6" class="190" value="190">LIEN 190</option> <option id="sb1" class=" xdo 190" value="xdo190">190 xdo</option> <option id="sb2" class="gi 190" value="gi190">190 gi</option> <option id="sb3" class="hip 190" value="hip190">190 hi</option> </select> <br><br> <button class="values">Generer Lien </button> <p><input name="lns" id="lns" type="text" /></p>