javascript - 下拉项目文本更改选择

Question

我尝试过这个简单的javascript 。从下拉菜单中选择值时的下拉组 btn 必须将其文本更改为所选值。但它不会更改以下 javascript 代码中的文本:

$(document).ready(function(){
var d=new Date(); 
var year = ["2013","2014"];
var monthNames = [ "January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December" ];




for(i=0; i<monthNames.length; i++){

    $("#dd1").append("<li><a href=''>"+monthNames[i]+"</a></li>");
$("#dd2").append("<li><a href=''>"+monthNames[i]+"</a></li>");
}
});

相应的HTML代码如下:

   <div class="well carousel-search hidden-phone">
                <div class="btn-group">
                    <a id = 'test1'class="btn dropdown-toggle btn-select" data-toggle="dropdown" href="#">Choose Month 1 <span class="caret"></span></a>
                    <ul id = "dd1" class="dropdown-menu"></ul>
                </div>

                <div class="btn-group">
                    <a  id = 'test'  class="btn dropdown-toggle btn-select2" data-toggle="dropdown" href="#">Choose Month 2 <span class="caret"></span></a>
                    <ul id = "dd2" class="dropdown-menu"></ul>
                </div>

            </div>

Answer 1

你有几个问题......首先。您需要动态地锚定要添加的链接。只需使用 $("#dd1").append("<li><a href='#'>..." 即可完成。如果没有这个，我就会在 fiddle 中遇到错误。

第二。您需要确保使用 jquery 选择 a 标签。然后你就可以拉出文本，你也可以再次使用 jQuery 来设置 test1 div 的文本。见下文

$("#dd1 li a").click(function () {
    var selText = $(this).text();
    $("#test1").text(selText);

});

演示:http://jsfiddle.net/JAwxq/4/