Javascript 如何使用Jquery处理作为按钮实现的下拉列表

实际的HTML是：

**var count=0;
$( "#colordrop" ).click(function(event){   
    count++;
    if(count%2==0)      
    var colorListData = document.getElementById("colordrop").innerHTML; 
    document.getElementById('monthly-price').innerHTML = colorListData;
});**

默认颜色






每月成本自

&磅；35

您需要在每个

上处理一次单击，而不是
。我还注意到您的HTML中缺少
上的ID，因此请确保也添加该ID


$（“#colordrop>li”）。单击（函数（事件）{
var colorListData=$（this）.text（）；
console.log（colorListData）；
});

默认颜色






每月成本自

&磅；35
能否在问题中添加更多代码片段？很难理解，我添加了实际的HTML，我使用的修改后的HTML是第一个。我的要求是：单击
标记下的下拉值时，应触发jquery，并应更改标记内的值，即35。在
中将更改什么值？设置为Color1？
**var count=0;
$( "#colordrop" ).click(function(event){   
    count++;
    if(count%2==0)      
    var colorListData = document.getElementById("colordrop").innerHTML; 
    document.getElementById('monthly-price').innerHTML = colorListData;
});**

<div class="btn-group btn-grp-uk col-xs-12 ">
    <button type="button" class="btn-phn btn btn-dropdown-white-uk dropdown-toggle col-xs-12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default Color <span class="glyphicon glyphicon-menu-down"></span> <span class="glyphicon glyphicon-menu-up"></span>
    </button>
    <ul class="dropdown-menu col-xs-12 p-l-0">
        <li> <a href="#">Color1</a> </li>
        <li> <a href="#">Color2</a> </li>
        <li> <a href="#">Color3</a> </li>       
        <li> <a href="#">Color4</a> </li>
    </ul>
</div>
<div class="col-xs-12 col-md-8 col-md-offset-4 text-center ">
    <div class="col-xs-6 col-sm-4 col-sm-offset-2 col-md-3 col-md-offset-0 mob-cost">
    <p><strong>MONTHLY COST FROM</strong> </p>
    <h3>&pound;35<small>.00</small></h3> </div>
</div>