Bootstrap 下拉按钮-> post 选定的下拉值 onclick + 使用选定值更新下拉列表

Question

目标：用户从下拉按钮中选择粒度（参见下面的 HTML）。
粒度下拉列表已更新以显示用户选择的值。
Ajax post 在后台发生，选择的值将通过 MVC 控制器读取。也可以使用一些帮助。

注意：我查看了以下 post 以使用所选值更新下拉列表。我使用 Jai 的解决方案的第二个版本
How to Display Selected Item in Bootstrap Button Dropdown Title
我遇到的问题是它错误地更新了页面上的另一个下拉菜单。我需要它来更新基于 id 的下拉按钮，例如 id_granularity_dropdown.

任何帮助你都会有很大的帮助。有值的ajaxpost对我来说也是个问题。

HTML 用于下拉菜单。

<ul class="nav navbar-top-links navbar-right">
<li>
    <div class="btn-group">
        <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown">Auto Sampling <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="#">5 min Sampling</a></li>
            <li><a href="#">30 min Sampling</a></li>
            <li><a href="#">Hourly Sampling</a></li>
            <li><a href="#">Daily Sampling</a></li>
        </ul>
    </div>
</li>
</ul>

Answer 1

更新：我在单独的函数中动态填充下拉列表，然后调用更新标题的点击方法，您可以将其放入 ajax 方法并更新您的标题。

这可以通过执行以下操作来实现：

<ul class="nav navbar-top-links navbar-right">
<li>
<div class="btn-group">
<button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown"><span id="sampVal">Auto Sampling</span> <span class="caret"></span></button>
    <ul class="dropdown-menu" id="list">
    </ul>
</div>
</li>

和 javascript :

        $(document).ready(function(){
  populateLi();
})

$(function() {
  $(".dropdown-menu").on("click","li a",function(){
      a = $(this).closest("a");
      var getSampling = a.text();
      $(this).closest(".dropdown-menu").prev().find(".sampVal").text(getSampling);

});


});

function populateLi()
{

    $("#id_granularity_dropdown2").find(".dropdown-menu").empty();
    insertLi('list2',"#",'1115 min Sampling');
    insertLi('list2',"#",'3000 min Sampling');
    insertLi('list2',"#",'no Hourly min Sampling');
    insertLi('list2',"#",'no Daily min Sampling');
    $("#id_granularity_dropdown").find(".dropdown-menu").empty();
    insertLi('list',"#",'5 min Sampling');
    insertLi('list',"#",'30 min Sampling');
    insertLi('list',"#",'Hourly min Sampling');
    insertLi('list',"#",'Daily min Sampling');
        

        
}

function insertLi (ID,HREF,VALUE) {
    ul = document.getElementById(ID); 
    a= document.createElement("a");
    a.appendChild(document.createTextNode(VALUE));
    a.setAttribute("href", HREF);
    li =  document.createElement("li");
    li.appendChild(a);
    ul.appendChild(li);
}

.nav li {display:inline-block;margin-right:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-top-links navbar-right">
<li>
    <div class="btn-group">
    <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown"><span id="sampVal" class="sampVal">Auto Sampling</span> <span class="caret"></span></button>
        <ul class="dropdown-menu" id="list">
            
        </ul>
    </div>
</li>
<li>
    <div class="btn-group">
    <button data-toggle="dropdown" class="btn-xs btn-info dropdown-toggle" id="id_granularity_dropdown2"><span id="sampVal2" class="sampVal">No Auto Sampling</span> <span class="caret"></span></button>
        <ul class="dropdown-menu" id="list2">
            
        </ul>
    </div>
</li>

</ul>

在这里工作fiddle：https://jsfiddle.net/x5rbq4dn/5/

您还可以将 ajax 代码放在 li click 函数中，并更新要更新标题的按钮，方法是将其包装在另一个范围内，就像 #sampVal 完成的那样。

您可以在这里查看：AJAX list update, get new elements and count

Bootstrap 下拉按钮-> post 选定的下拉值 onclick + 使用选定值更新下拉列表

Bootstrap Dropdown button-> post selected dropdown value onclick + Update dropdown with selected value

ajax

twitter-bootstrap

model-view-controller

drop-down-menu

dropdown