选择时下拉项目文本更改答案

【问题标题】：Drop down Item Text Change on selection选择时下拉项目文本更改
【发布时间】：2013-10-29 20:31:28
【问题描述】：

我尝试过处理这个简单的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>

【问题讨论】：

标签： javascript jquery html drop-down-menu

【解决方案1】：

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

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

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

});

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

【讨论】：

【解决方案2】：

离开你的 JS Fiddle，id 这样做：

改变

$("#dd1").click(function(){
var selText = $(this).text();
var objSelect = document.getElementById("test1");
objSelect.text = selText;
});

到

$("#dd1 li a").click(function(){
  $('#test1').text($(this).text());
});

【讨论】：