Question

我试图在使用bootstraps下拉菜单时尝试使用我的JavaScript if语句。

目标：有2个下拉菜单。用户将根据用户选择将要发生的事情从每个中选择一个值。我见过许多使用该方法的例子，但bootstrap似乎有点不同。此外，我见过很多人推荐jQuery，因为它更容易，但我更喜欢使用Javascript（我正在学习）。如果有人可以指出我正确的方向，我会很感激，或者如果我的方法完全偏离基础，请让我知道正确的方法。此外，我目前在我的HTML中没有“id”因为我不确定在哪里放它。干杯。

HTML: 

    <!--Drop down Item 1 -->
<h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
<div class="dropdown">
  <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
    Eye Color
  </button>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#"><img src="img/brown_eye.jpg" class="rounded-circle" value="brown"> Brown</a>
    <a class="dropdown-item" href="#"><img src="img/blue_eye.jpg" class="rounded-circle" value="blue"> Blue</a>
    <a class="dropdown-item" href="#"><img src="img/green_eye.jpg" class="rounded-circle" value="green"> Green</a>
    <a class="dropdown-item" href="#"><img src="img/hazel_eye.jpg" class="rounded-circle" value="hazel"> Hazel</a>
  </div>

</div>


<!--Drop down Item 2-->
<h4 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h4>
<div class="dropdown">
  <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
    Skin Tone
  </button>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton" onchange="dropdownChange();">
    <a class="dropdown-item" href="#"><img src="img/fair.jpg" class="rounded-circle" value="fair"> Fair (porcelain)</a>
    <a class="dropdown-item" href="#"><img src="img/light.jpg" class="rounded-circle" value="light"> Light (fair to light)</a>
    <a class="dropdown-item" href="#"><img src="img/medium.jpg" class="rounded-circle" value="medium"> Medium (light to medium)</a>
    <a class="dropdown-item" href="#"><img src="img/bronze_dark.jpg" class="rounded-circle" value="bronze"> Bronze dark (deep tan)</a>
    <a class="dropdown-item" href="#"><img src="img/tan.jpg" class="rounded-circle" value="tan"> Tan (warm to medium)</a>   
    <a class="dropdown-item" href="#"><img src="img/dark.jpg" class="rounded-circle" value="rich"> Rich (deep)</a>
  </div>

</div>

<br>

<!--Result-->
<button type="button" class="btn btn-info btn-lg active" style="background-color: #3e4444;"> Submit</button>

JS: 

    function validate()   {
var a =document.getElementById("eye_color").value;
var b =document.getElementById("skin_tone").value;
if (a == "green" && b == "fair"){
alert("Brown is your best hair color!!");
}    
}

Answer 1

这是一个纯粹的Javascript（没有jQuery）的例子，说明了你所要求的想法。

＆＃13;

<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script>

      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 && skinTone){
          alert(`You selected ${eyeColor} eye colour and ${skinTone} skin tone.`);
          //////////////////////////
          //////////////////////////
          //put your extra conditions below
          //////////////////////////
          //////////////////////////
          if (eyeColor=="brown" && skinTone=="fair"){
            alert("You should have w/e colour hair...");
          } else if (eyeColor=="brown" && skinTone=="tan"){
            alert("You should have w/e colour hair...");
          }
        }
        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)=>{
          if (!menu.attributes.onchange) return;
          const menuCallbackName = menu.attributes.onchange.value;
          const fetchedCallback = window[menuCallbackName] || null;

          if (fetchedCallback){
            Array.from(menu.children).forEach((child)=>{
              const callbackValue = child.attributes.data ? child.attributes.data.value : null;
              if (callbackValue) child.onclick = () => fetchedCallback(callbackValue);
            });
          } else console.error(`No callback function named ${menuCallbackName} for menu ${idx}`);

        });
      }



    </script>
  </head>

  <body>
    <!--Drop down Item 1 -->
    <h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
    <div class="dropdown">
      <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
        Eye Color
      </button>


      <div class="dropdown-menu" onchange="selectMenu1" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#" data="brown"><img src="img/brown_eye.jpg" class="rounded-circle"> Brown</a>
        <a class="dropdown-item" href="#" data="blue"><img src="img/blue_eye.jpg" class="rounded-circle" > Blue</a>
        <a class="dropdown-item" href="#" data="green"><img src="img/green_eye.jpg" class="rounded-circle" > Green</a>
        <a class="dropdown-item" href="#" data="hazel"><img src="img/hazel_eye.jpg" class="rounded-circle" > Hazel</a>
      </div>

    </div>


    <!--Drop down Item 2-->
    <h4 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h4>
    <div class="dropdown">
      <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color: #588c7e;">
        Skin Tone
      </button>

      <div class="dropdown-menu" onchange="selectMenu2" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#" data="fair"><img src="img/fair.jpg" class="rounded-circle" > Fair (porcelain)</a>
        <a class="dropdown-item" href="#" data="light"><img src="img/light.jpg" class="rounded-circle" > Light (fair to light)</a>
        <a class="dropdown-item" href="#" data="medium"><img src="img/medium.jpg" class="rounded-circle" > Medium (light to medium)</a>
        <a class="dropdown-item" href="#" data="bronze"><img src="img/bronze_dark.jpg" class="rounded-circle" > Bronze dark (deep tan)</a>
        <a class="dropdown-item" href="#" data="tan"><img src="img/tan.jpg" class="rounded-circle" > Tan (warm to medium)</a>
        <a class="dropdown-item" href="#" data="rich"><img src="img/dark.jpg" class="rounded-circle" > Rich (deep)</a>
      </div>

    </div>

    <br>

    <!--Result-->
    <button type="button" class="btn btn-info btn-lg active" style="background-color: #3e4444;" onclick="validate()"> Submit</button>
  </body>

</html>

＆＃13;

与bootstrap下拉菜单

1 个答案: