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

Question

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

一个完美的例子是Fallout 4 store page，其中“订购”按钮被禁用，直到从下拉菜单中实际选择了一个项目。 （就我而言，只有一个下拉菜单）。

我有以下 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'));}

我希望“立即订购”按钮能够根据下拉菜单接收到供应商的外部链接。这意味着我需要从下拉菜单中将变量传递给按钮 - 到目前为止，我还没有成功。

我对 bootstrap 和 javascript 都很陌生，希望这里有人可以指出我应该如何处理这个问题的正确方向。

我假设我应该能够将 href-value 与下拉菜单中的项目一起存储，并在选择时将它们传递给 order-button，但我没有运气试图弄清楚这一点同时不通过下拉菜单将玩家直接指向供应商。

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

Answer 1

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

我通常会拿起按钮，然后像这样将其包裹在标签中：

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

请注意我是如何默认禁用按钮的，然后您可以使用 javascript/jquery 在页面上执行特定操作时删除禁用属性。

至于根据选择的不同框进行设置，如果您希望它在不重新加载页面的情况下实时更新，或者如果您不担心页面，您还可以使用 jquery 设置 href="" 属性需要重新加载，可以在 href 引号内使用。