如何从Bootstrap 4下拉项目菜单中显示所选项目

Question

我试图显示用户单击Boostrap 4下拉菜单中的项目后所选择的内容。

例如用户选择“您的眼睛是什么颜色”：蓝色-单击后显示蓝色。

例如用户选择“您的肤色是什么”：Fair-单击后显示Fair。

我已经进行了研究，jQuery似乎是最好的选择，但是所有解决方案都适用于较早的引导程序版本。我正在使用Boostrap 4，而bootstrap 4代码中没有li标记，因为它们都是类标记，所以我不确定如何将其放入下面的jQuery选项。另外，我有（2）下拉菜单-请参见图片。我不确定这是否会更棘手。任何帮助或指导都会很棒。

jQuery：

$(document).ready (function(){

$('#selectmenu1 a').click(function){

}

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-md 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-->
<h3 class="display-4" style="font-size: 1.5rem;"> What is your skin tone</h3>
<div id="menu2" class="dropdown">
  <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;">
    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>

<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.`);

    if (eyeColor=="brown" && skinTone=="fair"){
      window.location = "brown/brown_fair.html";
    } else if (eyeColor=="brown" && skinTone=="light"){
      window.location = "brown/brown_light.html";
    } else if (eyeColor=="brown" && skinTone=="medium"){
      window.location = "brown/brown_medium.html";
    } else if (eyeColor=="brown" && skinTone=="bronze"){
      window.location = "brown/brown_bronze.html";
    } else if (eyeColor=="brown" && skinTone=="tan"){
      window.location = "brown/brown_tan.html";
    } else if (eyeColor=="brown" && skinTone=="rich"){
      window.location = "brown/brown_rich.html";
    }   

    if (eyeColor=="blue" && skinTone=="fair"){
      window.location = "blue/blue_fair.html";
    } else if (eyeColor =="blue" && skinTone=="light"){
      window.location = "blue/blue_light.html";
    } else if (eyeColor =="blue" && skinTone=="medium"){
      window.location = "blue/blue_medium.html";
    } else if (eyeColor =="blue" && skinTone=="bronze"){
      window.location = "blue/blue_bronze.html";
    } else if (eyeColor=="blue" && skinTone=="tan"){
      window.location = "blue/blue_tan.html";
    } else if (eyeColor=="blue" && skinTone=="rich"){
      window.location = "blue/blue_rich.html";
    }

    if (eyeColor=="green" && skinTone=="fair"){
        window.location = "green/green_fair.html";
    } else if (eyeColor == "green" && skinTone=="light"){
      window.location= "green/green_light.html";
    } else if (eyeColor== "green" && skinTone=="medium"){
      window.location="green/green_medium.html";
    } else if (eyeColor=="green" && skinTone=="bronze"){
      window.location="green/green_bronze.html";
    } else if (eyeColor=="green" && skinTone=="tan"){
      window.location="green/green_tan.html";
    } else if (eyeColor=="green" && skinTone=="rich"){
      window.location="green/green_rich.html";
    }


    if (eyeColor=="hazel" && skinTone=="fair"){
        window.location = "hazel/hazel_fair.html";
    } else if (eyeColor=="hazel" && skinTone=="light"){
      window.location="hazel/hazel_light.html";
    } else if (eyeColor=="hazel" && skinTone=="medium"){
      window.location="hazel/hazel_medium.html";
    } else if (eyeColor=="hazel" && skinTone=="bronze"){
      window.location="hazel/hazel_bronze.html";
    } else if (eyeColor=="hazel" && skinTone=="tan"){
      window.location="hazel/hazel_tan.html";
    } else if (eyeColor=="hazel" && 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)=>{
      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>

Answer 1

您可以使用jQuery的“ attr（）”函数访问数据。

$('#selectmenu1 a').click(
  function( event ){
    // Prevents browser from treating like normal anchor tag
    event.preventDefault()

    // Retrieves data in anchor tag
    let data = $(this).attr('data')
  }
)

旁注it is possible在Bootstrap中为此使用列表标签。 Bootstrap确实非常灵活和强大。而且，在我看来，使用“选择”在语义上最正确。

Answer 2

我找到了解决方法：

我将input-group包含在我的html中，并包含jQuery：

HTML：

    <h3 class="display-4" style="font-size: 1.5rem;">What is your eye color</h3>
    <div class="dropdown">
        <div class="input-group justify-content-center">
            <div class="input-group-btn">
                <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;">
                    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>
        </div>
    </div>



<script>
    $(".dropdown-menu a ").click(function(){
                $(this).parents(".input-group-btn").find('.btn').text($(this).text());
            });
</script>

Answer 3

甚至更容易

 DECLARE
    @Date AS DATETIME = '2019-08-08 00:00:00.000',
    @Developer_Name AS VARCHAR(100) = 'Deepa Nadella'
--AS

BEGIN   
    DECLARE 
        --Get User ID
        @UserID AS BIGINT = (SELECT usr.id FROM [dbo].[mantis_user_table] AS usr wHERE usr.realname = @Developer_Name), 
    @Average_30 BIGINT = 0,
    @Average_60 BIGINT = 0,
    @Average_90 BIGINT = 0

DECLARE 
    @Resolved_30 BIGINT = (SELECT COUNT([id]) FROM [dbo].[mantis_bug_table] bug WHERE [last_updated] BETWEEN DATEADD(DAY, -30, @Date) AND @Date AND [status] = 80 AND [reporter_id] = @UserID),
    @Resolved_60 BIGINT = (SELECT COUNT([id]) FROM [dbo].[mantis_bug_table] bug WHERE [last_updated] BETWEEN DATEADD(DAY, -60, @Date) AND @Date AND [status] = 80 AND [reporter_id] = @UserID),
    @Resolved_90 BIGINT = (SELECT COUNT([id]) FROM [dbo].[mantis_bug_table] bug WHERE [last_updated] BETWEEN DATEADD(DAY, -90, @Date) AND @Date AND [status] = 80 AND [reporter_id] = @UserID),
    @Assigned_30 BIGINT = (SELECT COUNT([id]) FROM [dbo].[mantis_bug_table] bug WHERE [last_updated] BETWEEN DATEADD(DAY, -30, @Date) AND @Date AND [status] = 50 AND [reporter_id] = @UserID),
    @Assigned_60 BIGINT = (SELECT COUNT([id]) FROM [dbo].[mantis_bug_table] bug WHERE [last_updated] BETWEEN DATEADD(DAY, -60, @Date) AND @Date AND [status] = 50 AND [reporter_id] = @UserID),
    @Assigned_90 BIGINT = (SELECT COUNT([id]) FROM [dbo].[mantis_bug_table] bug WHERE [last_updated] BETWEEN DATEADD(DAY, -90, @Date) AND @Date AND [status] = 50 AND [reporter_id] = @UserID)

    --Average Tasks
    IF(@Resolved_30 > 0) BEGIN
        SET @Average_30 = SUM(@Assigned_30 / @Resolved_30)
    END

    IF(@Resolved_60 > 0) BEGIN
        SET @Average_60 = SUM(@Assigned_60 / @Resolved_60)
    END

    IF(@Resolved_90 > 0) BEGIN
        SET @Average_90 = SUM(@Assigned_90 / @Resolved_90)
    END

SELECT
    @UserID,
    @Resolved_30 AS 'Resolved_30',
    @Resolved_60 AS 'Resolved_60',
    @Resolved_90 AS 'Resolved_90',
    @Assigned_30 AS 'Assigned_30',
    @Assigned_90 AS 'Assigned_90',
    @Average_30 AS 'Average Tasks Completed In 30 Days',
    @Average_60 AS 'Average Tasks Completed In 60 Days',
    @Average_90 AS 'Average Tasks Completed In 90 Days'

在下面使用此HTML。不需要输入组，jQuery也足够短。

<script>
$(".dropdown-menu a ").click(function () {
    let x = $(this).text();
    alert(x);
});
</script>