ドロップダウンから別のボタンへのリンク値の受け渡し

Question

私は現在、ユーザーがドロップダウンメニューから特定のベンダーを選択し、別のボタンをクリックして選択を確認できるオーダーシステムを開発中です。

完全な例は、Fallout 4 store pageです。ここでは、ドロップダウンメニューから項目が実際に選択されるまで「注文」ボタンが無効になっています。 （私の場合、ドロップダウンメニューは1つしかありません）。

$(".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'));} 

が、私は今、「 - オドナーをしたい：ドロップダウンボタンのラベルを置き換える

<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：

私は、次のHTMLを持っています" - ドロップダウンメニューに基づいてベンダーへの外部リンクを受信できるようにするボタン。つまり、私はドロップダウンメニューからボタンに変数を渡す必要があります - これまではこれで成功することはできませんでした。

私はブートストラップと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を使用して無効な属性を削除できます。

別のボックスに基づいて設定する限り、ページをリロードせずにライブ更新をしたい場合はjqueryを使用してhref = ""属性を設定することもできます。ページを再読み込みする必要がある場合は、href引用符を使用することができます。