2016-07-04 62 views
0

我目前工作的订货系统,允许用户选择从下拉菜单中指定的供应商,并通过点击一个单独的按钮comfirm他们的选择上。传链路值到另一个按钮

一个完美的例子是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'));} 

我希望“Ordner现在“ - 按钮可以根据下拉菜单接收到供应商的外部链接。这意味着我需要将一个变量传递给下拉菜单中的按钮 - 到目前为止,我还没有设法成功。

我很新的既引导和JavaScript在这里希望有人可能会指出我在正确的方向,以我应该怎么处理这种情况。

我假设我应该能够存储与下拉菜单中的项目的href值,并将它们传递给选择时的顺序按钮,但我已经没有运气试图计算这个同时不通过下拉菜单将玩家直接指向供应商。

我也尝试过没有预期效果的表单。显然我做错了什么,但不知道它是什么。

回答

0

退房的信息,这里使用的引导按钮:http://v4-alpha.getbootstrap.com/components/buttons/

我通常采取的按钮,然后在这样的标签包装它:

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

注意我是如何做出的按钮默认情况下禁用,那么当页面上执行特定操作时,您可以使用javascript/jquery删除disabled属性。

只要设置它基于不同的盒子被选中,你也可以设置href =“”属性使用jquery,如果你希望它实时更新而无需重新加载页面,或者如果你不担心页面需要重新加载,你可以在href里面使用引号。

+0

这帮了很多,谢谢! 没有意识到,一旦我发现事实上命名事物使事情变得更容易,结果会如此简单。 可能不是最干净的解决方案,但它的工作原理。 我通过下拉菜单的onclick函数启用按钮,并将项目的名称作为href链接传递给订单按钮。 –

相关问题