Populate div list based on first selection-CodePudding

I'm using some code from another user question on here to create a list of selectable divs from a select input box.

This works perfectly for the first block of divs, but on my page, the selected item refreshes the second select list with a list of options depending on the user selection.

The second select box populates fine, but I need to find a way to then refresh the resulting div list.

I've added in a snippet below, and ideally want the second drop down box to refresh the divs based on the selection in the first box.

In the snippet you can see that selecting the UK address produces 2 options in the second box, but the divs below don't refresh.

var dms_1 = new Object();
dms_1['147724'] = new Object();
dms_1['147724']['IS.05'] = "International 1";
dms_1['212706'] = new Object();
dms_1['212706']['UK.01'] = "UK 1";
dms_1['212706']['UK.02'] = "UK 2";

function fill_delivery_methods_1(addSel) {
  var methSel = document.del_sel.delivery_method_1;
  methSel.options.length = 0;
  
  for (var address in dms_1) {
    if (address == addSel.options[addSel.selectedIndex].value) {
      for (var method in dms_1[address]) {
        methSel.options[methSel.options.length] = new Option(dms_1[address][method], method);
      }
    }
  }
}

// lets make divs options for the select
customSelect("this_delivery_1", "customSelectOne", 1);
customSelect("delivery_method_1", "customSelectTwo", 0);

// get the click for each options created
$(document).on("click", ".selectOption", function(event) {
  // first, we remove class for each option div
  $(this).parent("div:first").find('.selectOption').removeClass('checked');

  const getOptionID = $(this).data('optionid'); // get value of data optionid
  $(this).toggleClass('checked'); // add/remove checked class
  // change value of hiddent select
  $(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});

$('.hideShowSelect').click(function() {
  $('select').toggle();
});

/*
  loop that make reproduce options of your select
  @select : selector of the select
  @div : selector of the div that will contain the divs for each option
  @checked : 1 to make first div checked or 0 to not
*/
function customSelect(select, div, checked) {
  // we loop each option
  $('select[name="'   select   '"] option').each(function(index) {
    // check if need to add checked class if index is equal to 0 and checked equal to 1
    const checkFirstOption = (index === 0 && checked === 1 ? ' checked' : '');
    const optionVal = $(this).val(); // get option value
    const optionLabel = $(this).text();

    // create a div for the option with data value with option value
    $('.'   div).append('<div  data-optionid="'   optionVal   '">'   optionLabel   '</div>');
  });
}
// styles the select box 
$('.selectOption').html(function() {
  return $(this).html().replace('Name:', '<span>Name:</span>');
});

$('.selectOption').html(function() {
  return $(this).html().replace('Address:', '<br/><span>Address:</span>');
});

#addressSelectBox,
#deliverySelectBox {
  max-width: 450px;
  margin-top: 25px;
}

#addressSelectBox select,
#deliverySelectBox select {
  display: block;
}

#addressSelectBox .selectOption,
#deliverySelectBox .selectOption {
  line-height: 1.8em;
  color: #000;
  cursor: pointer;
  display: inline-block;
  background: #f1f1f1;
  padding: 15px 17.5px;
  border-radius: 2.5px;
  margin: 5px;
  transition: all 0.3s ease-out;
}

#addressSelectBox .selectOption span,
#deliverySelectBox .selectOption span {
  font-family: rubik-bold
}

#addressSelectBox .selectOption.checked,
#deliverySelectBox .selectOption.checked {
  background: #89ff89;
}

#addressSelectBox .selectOption.checked:before,
#deliverySelectBox .selectOption.checked:before {
  content: "\f00c";
  position: absolute;
  right: 19px;
  font-family: 'FontAwesome';
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="####" method="post" name="del_sel">
  <div id="addressSelectBox">
    <select name="this_delivery_1" onchange="fill_delivery_methods_1(this)">
      <option value="147724">Name: Me Address: 34 Ramsay Street, Australia</option>
      <option value="212706">Name: You Address: 34 Colchester Avenue, CT3 4PP, UK</option>
    </select>
    
    <div ></div>
  </div>

  <div id="deliverySelectBox">
    <select name="delivery_method_1">
      <option value="IS.05">International 1</option>
    </select>
    
    <div ></div>
  </div>
</form>

<p><a href="#" >Hide / show select</a></p>

CodePudding user response：

In the function fill_delivery_methods_1() was no code for changing the div.customSelectTwo.

It works if you first empty this div with:

$('.customSelectTwo').html('');

and then fill it with a div.selectOption for each method key that belongs to the address value, that you got from the first select:

$('.customSelectTwo').append('<div  data-optionid="'   [method]   '">'   dms_1[address][method]   '</div>');

Working example:

var dms_1 = new Object();
dms_1['147724'] = new Object();
dms_1['147724']['IS.05'] = "International 1";
dms_1['212706'] = new Object();
dms_1['212706']['UK.01'] = "UK 1";
dms_1['212706']['UK.02'] = "UK 2";

function fill_delivery_methods_1(addSel) {
  var methSel = document.del_sel.delivery_method_1;
  methSel.options.length = 0;
  $('.customSelectTwo').html('');
  
  for (var address in dms_1) {
    if (address == addSel.options[addSel.selectedIndex].value) {
      for (var method in dms_1[address]) {
        methSel.options[methSel.options.length] = new Option(dms_1[address][method], method);
        
        $('.customSelectTwo').append('<div  data-optionid="'   [method]   '">'   dms_1[address][method]   '</div>');
      }
    }
  }
}

customSelect("this_delivery_1", "customSelectOne", 1);
customSelect("delivery_method_1", "customSelectTwo", 0);

$(document).on("click", ".selectOption", function(event) {
  $(this).parent("div:first").find('.selectOption').removeClass('checked');

  const getOptionID = $(this).data('optionid'); 
  $(this).toggleClass('checked'); 
  $(this).parent("div:first").prevAll('select:first').val(getOptionID).change();
});

$('.hideShowSelect').click(function() {
  $('select').toggle();
});

function customSelect(select, div, checked) {
  $('select[name="'   select   '"] option').each(function(index) {
    const checkFirstOption = (index === 0 && checked === 1 ? ' checked' : '');
    const optionVal = $(this).val();
    const optionLabel = $(this).text();

    $('.'   div).append('<div  data-optionid="'   optionVal   '">'   optionLabel   '</div>');
  });
}

$('.selectOption').html(function() {
  return $(this).html().replace('Name:', '<span>Name:</span>');
});

$('.selectOption').html(function() {
  return $(this).html().replace('Address:', '<br/><span>Address:</span>');
});

#addressSelectBox,
#deliverySelectBox {
  max-width: 450px;
  margin-top: 25px;
}

#addressSelectBox select,
#deliverySelectBox select {
  display: block;
}

#addressSelectBox .selectOption,
#deliverySelectBox .selectOption {
  line-height: 1.8em;
  color: #000;
  cursor: pointer;
  display: inline-block;
  background: #f1f1f1;
  padding: 15px 17.5px;
  border-radius: 2.5px;
  margin: 5px;
  transition: all 0.3s ease-out;
}

#addressSelectBox .selectOption span,
#deliverySelectBox .selectOption span {
  font-family: rubik-bold
}

#addressSelectBox .selectOption.checked,
#deliverySelectBox .selectOption.checked {
  background: #89ff89;
}

#addressSelectBox .selectOption.checked:before,
#deliverySelectBox .selectOption.checked:before {
  content: "\f00c";
  position: absolute;
  right: 19px;
  font-family: 'FontAwesome';
  color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form action="####" method="post" name="del_sel">
  <div id="addressSelectBox">
    <select name="this_delivery_1" onchange="fill_delivery_methods_1(this)">
      <option value="147724">Name: Me Address: 34 Ramsay Street, Australia</option>
      <option value="212706">Name: You Address: 34 Colchester Avenue, CT3 4PP, UK</option>
    </select>
    
    <div ></div>
  </div>

  <div id="deliverySelectBox">
    <select name="delivery_method_1">
      <option value="IS.05">International 1</option>
    </select>
    
    <div ></div>
  </div>
</form>
<p><a href="#" >Hide / show select</a></p>