Question

我目前正在开发一个订购系统，允许用户从下拉菜单中选择指定的供应商，并通过单击一个单独的按钮来确认他们的选择。

一个完美的例子是Fallout 4 store page，其中＆＃34; Order＆＃34; - 按钮被禁用，直到从下拉菜单中实际选择了一个项目。（在我的情况下，只有一个下拉菜单。）

我有以下HTML：

<div class="col-md-12">
<div class="productRow">
    <div class="row">
    <div class="col-md-1"></div>

        <div class="col-md-5">
            <div class="dropdownPositionLeft">
                <div class="dropdown">
                  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Choose your platform!
                    <span class="caret"></span>
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <!-- List of vendors -->
                    <li><a tabindex="-1">Item I</a></li>
                    <li><a tabindex="-1">Item II</a></li>
                    <li><a tabindex="-1">Item III</a></li>
                  </ul>
                </div>
            </div>
        </div>

        <div class="col-md-5">
            <div class="dropdownPositionRight">
                <!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
                <a href="<passed variable>" class="btn btn-danger" role="button">Order now!</a>
            </div>
        </div>
    </div>  
</div>

以下javascript替换了下拉按钮的标签：

$(".dropdown-menu li a").click(function(){
  $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
  $(this).parents(".dropdown").find('.btn').val($(this).data('value'));}

我希望＆＃34; Ordner now＆＃34; -button能够根据下拉菜单接收到供应商的外部链接。这意味着我需要将一个变量传递给下拉菜单中的按钮 - 到目前为止，我还没有成功实现此目标。

我对bootstrap和javascript都很陌生，希望有人在这里指出我应该如何处理这个问题。

我假设我应该能够在下拉菜单中存储带有项目的href值，并在选中时将它们传递给订单按钮，但我在尝试时没有运气计算出来的同时没有通过下拉菜单将玩家直接指向供应商。

我还尝试过没有预期效果的表格。显然，我做错了什么，但不确定它是什么。

Answer 1

在此处查看有关使用引导按钮的信息：http://v4-alpha.getbootstrap.com/components/buttons/

我通常按下按钮，然后将其包装在标签中，如下所示：

<a href="..."><button type="button" class="btn btn-primary" disabled>Primary</button></a>

注意默认情况下我如何禁用该按钮，然后您可以使用javascript / jquery在页面上执行某个操作时删除disabled属性。

只要根据选择的其他方框进行设置，您也可以设置href =＆＃34;＆＃34;使用jquery属性，如果你希望它在不重新加载页面的情况下实时更新，或者如果你不担心需要重新加载的页面，你可以在href引号中使用。

将链接值从下拉列表传递到另一个按钮

1 个答案: