2016-07-04 41 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鏈接傳遞給訂單按鈕。 –

相關問題