How to make layers deep decision tree with showing/hiding HTML divs?-CodePudding

I would like to make an HTML page consisting of decision trees depending on the option selected during dropdown. I could only make it one layer deep with a Yes or a No, but couldn't proceed with a Yes/No after a first Yes or a Yes/No after a first No. Is there something in the script I have to change to make it applicable or is it in the naming of the HTML tag?

$(document).ready(function() {
  $("div.myDiv").hide();
  $("div.myDiv2").hide();
  
  $('#myselection').on('change', function() {
    var value = $(this).val();

    $("div.myDiv").hide();
    $("#show"   value).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div>Is the forest land expected to be converted to non-forest land in the baseline case, or expected to be subject to authorized conversion to a managed tree plantation in the baseline case?
  <select id="myselection">
    <option>Select Option</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div id="showYes" >
  Is the land legally authorized and documented to be converted to non-forest or a managed tree plantation?
  <select id="myselection">
    <option>Select Option</option>
    <option value="YesYes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div id="showNo" >
  Is the forest in the baseline expected to degrade by fuelwood extraction or charcoal production?
  <select id="myselection">
    <option>Select Option</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div id="showYesYes" >
  Avoiding planned deforestation/planned degradation
</div>

<div id="showYesNo" >
  Avoiding unplanned deforestation
</div>

<div id="showNoYes" >
  Avoiding forest degradation
</div>

<div id="showNoNo" >
  Proposed project cannot be done
</div>

CodePudding user response：

First: IDs must be unique, therefor you should change the ID myselection that you have 3 times in your code (maybe in a class):

<select >

$('.myselection').on('change', function() {...});

You could solve your issue by combining the ID of the parent DIV and the value of the select with the attr() function and the parents() function, which accepts a selector as argument:

var value = $(this).val();
var parent_id = "#"   $(this).parents('div').attr('id');

$(parent_id   value).show();

To get this to work, you need to give the first div also such an ID:

<div id="show">Is the forest land expected...

and change the value of the Yes option of the second select from YesYes to Yes...

To control, which layer should be hidden, you could use a data attribute (maybe data-target), which you can use as selector for the hide() function:

<div id="show" data-hide=".myDiv, .myDiv2">Is the forest land expected...

var hide_selector= $(this).parents('div').data('hide');
        
$(hide_selector).hide();

Working example:

$(document).ready(function() {
  $(".myDiv").hide();
  $(".myDiv2").hide();
  
  $('.myselection').on('change', function() {
    var value = $(this).val();
    var parent_id = '#'   $(this).parents('div').attr('id');
    var hide_selector = $(this).parents('div').data('hide');
    
    $(hide_selector).hide();
    $(parent_id   value).show();
  });
});

div {
  margin: 1rem 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div id="show" data-hide=".myDiv, .myDiv2">Is the forest land expected to be converted to non-forest land in the baseline case, or expected to be subject to authorized conversion to a managed tree plantation in the baseline case?
  <select >
    <option>Select Option</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div id="showYes"  data-hide=".myDiv2">
  Is the land legally authorized and documented to be converted to non-forest or a managed tree plantation?
  <select >
    <option>Select Option</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div id="showNo"  data-hide=".myDiv2">
  Is the forest in the baseline expected to degrade by fuelwood extraction or charcoal production?
  <select >
    <option>Select Option</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
  </select>
</div>

<div id="showYesYes" >
  Avoiding planned deforestation/planned degradation
</div>

<div id="showYesNo" >
  Avoiding unplanned deforestation
</div>

<div id="showNoYes" >
  Avoiding forest degradation
</div>

<div id="showNoNo" >
  Proposed project cannot be done
</div>