title: How display selected item from Bootstrap 4 drop-down item menu
body: <p>I'm trying to display what the user selects once they click on an item from the Boostrap 4 drop down menu. </p>
  
  <p>Ex. "What is your eye color" User selects : Blue - Blue is displayed after click.</p>
  
  <p>Ex. "What is your skin tone" User selects: Fair- Fair is displayed after click. </p>
  
  <p>I have done research and jQuery seems to be the best bet however all of the solutions are for older bootstrap versions. I'm using Boostrap 4 and there are no li tags in the bootstrap 4 code, it's all a class tags so I'm not sure how to fit that into the jQuery option below. Also, I have (2) dropdown menus - please see pic. I'm not sure if this makes it more tricky. Any assistance or direction would be great.  </p>
  
  <p>jQuery: </p>
  
  <pre><code>$(document).ready (function(){
  
  $('#selectmenu1 a').click(function){
  
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code> &lt;!--Drop down Item 1 --&gt;
  &lt;h3 class="display-4" style="font-size: 1.5rem;"&gt;What is your eye color&lt;/h3&gt;
  &lt;div class="dropdown"&gt;
    &lt;button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;"&gt;
      Eye Color
    &lt;/button&gt;
  
  
    &lt;div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton"&gt;
      &lt;a class="dropdown-item" href="#" data="brown"&gt;&lt;img src="img/brown_eye.jpg" class="rounded-circle"&gt; Brown&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="blue"&gt;&lt;img src="img/blue_eye.jpg" class="rounded-circle" &gt; Blue&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="green"&gt;&lt;img src="img/green_eye.jpg" class="rounded-circle" &gt; Green&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="hazel"&gt;&lt;img src="img/hazel_eye.jpg" class="rounded-circle" &gt; Hazel&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;!--Drop down Item 2--&gt;
  &lt;h3 class="display-4" style="font-size: 1.5rem;"&gt; What is your skin tone&lt;/h3&gt;
  &lt;div id="menu2" class="dropdown"&gt;
    &lt;button class="btn btn-info btn-md dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;"&gt;
      Skin Tone
    &lt;/button&gt;
  
    &lt;div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton"&gt;
      &lt;a class="dropdown-item" href="#" data="fair"&gt;&lt;img src="img/fair.jpg" class="rounded-circle" &gt; Fair (porcelain)&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="light"&gt;&lt;img src="img/light.jpg" class="rounded-circle" &gt; Light (fair to light)&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="medium"&gt;&lt;img src="img/medium.jpg" class="rounded-circle" &gt; Medium (light to medium)&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="bronze"&gt;&lt;img src="img/bronze_dark.jpg" class="rounded-circle" &gt; Bronze dark (deep tan)&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="tan"&gt;&lt;img src="img/tan.jpg" class="rounded-circle" &gt; Tan (warm to medium)&lt;/a&gt;
      &lt;a class="dropdown-item" href="#" data="rich"&gt;&lt;img src="img/dark.jpg" class="rounded-circle" &gt; Rich (deep)&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  
      document.onreadystatechange = function () {
        if (document.readyState === "interactive") {
            initApplication();
        }
    }
  
  
    var eyeColor = null;
    function selectMenu1(value){
      eyeColor = value;
    }
  
    var skinTone = null;
    function selectMenu2(value){
      skinTone = value;
    }
  
    function validate()  { 
      if (eyeColor &amp;&amp; skinTone){
        // alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
  
      if (eyeColor=="brown" &amp;&amp; skinTone=="fair"){
        window.location = "brown/brown_fair.html";
      } else if (eyeColor=="brown" &amp;&amp; skinTone=="light"){
        window.location = "brown/brown_light.html";
      } else if (eyeColor=="brown" &amp;&amp; skinTone=="medium"){
        window.location = "brown/brown_medium.html";
      } else if (eyeColor=="brown" &amp;&amp; skinTone=="bronze"){
        window.location = "brown/brown_bronze.html";
      } else if (eyeColor=="brown" &amp;&amp; skinTone=="tan"){
        window.location = "brown/brown_tan.html";
      } else if (eyeColor=="brown" &amp;&amp; skinTone=="rich"){
        window.location = "brown/brown_rich.html";
      }   
  
      if (eyeColor=="blue" &amp;&amp; skinTone=="fair"){
        window.location = "blue/blue_fair.html";
      } else if (eyeColor =="blue" &amp;&amp; skinTone=="light"){
        window.location = "blue/blue_light.html";
      } else if (eyeColor =="blue" &amp;&amp; skinTone=="medium"){
        window.location = "blue/blue_medium.html";
      } else if (eyeColor =="blue" &amp;&amp; skinTone=="bronze"){
        window.location = "blue/blue_bronze.html";
      } else if (eyeColor=="blue" &amp;&amp; skinTone=="tan"){
        window.location = "blue/blue_tan.html";
      } else if (eyeColor=="blue" &amp;&amp; skinTone=="rich"){
        window.location = "blue/blue_rich.html";
      }
  
      if (eyeColor=="green" &amp;&amp; skinTone=="fair"){
          window.location = "green/green_fair.html";
      } else if (eyeColor == "green" &amp;&amp; skinTone=="light"){
        window.location= "green/green_light.html";
      } else if (eyeColor== "green" &amp;&amp; skinTone=="medium"){
        window.location="green/green_medium.html";
      } else if (eyeColor=="green" &amp;&amp; skinTone=="bronze"){
        window.location="green/green_bronze.html";
      } else if (eyeColor=="green" &amp;&amp; skinTone=="tan"){
        window.location="green/green_tan.html";
      } else if (eyeColor=="green" &amp;&amp; skinTone=="rich"){
        window.location="green/green_rich.html";
      }
  
  
      if (eyeColor=="hazel" &amp;&amp; skinTone=="fair"){
          window.location = "hazel/hazel_fair.html";
      } else if (eyeColor=="hazel" &amp;&amp; skinTone=="light"){
        window.location="hazel/hazel_light.html";
      } else if (eyeColor=="hazel" &amp;&amp; skinTone=="medium"){
        window.location="hazel/hazel_medium.html";
      } else if (eyeColor=="hazel" &amp;&amp; skinTone=="bronze"){
        window.location="hazel/hazel_bronze.html";
      } else if (eyeColor=="hazel" &amp;&amp; skinTone=="tan"){
        window.location="hazel/hazel_tan.html";
      } else if (eyeColor=="hazel" &amp;&amp; skinTone=="rich"){
        window.location="hazel/hazel_rich.html";
      }
    }
  
      else if (!eyeColor){
        alert("Please pick an eye colour");
      } else if (!skinTone){
        alert("Please pick a skin tone");
      }
      }
  
    function initApplication(){
      //setup dropdown menu selection events
      Array.from(document.querySelectorAll(".dropdown-menu")).forEach((menu,idx)=&gt;{
        const menuCallbackName = menu.attributes.onchange.value;
        const fetchedCallback = window[menuCallbackName] || null;
  
        if (fetchedCallback){
          Array.from(menu.children).forEach((child)=&gt;{
            const callbackValue = child.attributes.data ? child.attributes.data.value : null;
            if (callbackValue) child.onclick = () =&gt; fetchedCallback(callbackValue);
          });
        } else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);
  
      });
    }
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/1H3RR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1H3RR.png" alt="Ref photo"></a></p>