下拉项目文本更改选择

时间:2013-10-29 20:31:29

标签: javascript jquery html drop-down-menu

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

2 个答案:

答案 0 :(得分:2)

你有几个问题......首先。你需要锚定你动态添加的链接。多数民众赞成完成了$("#dd1").append("<li><a href='#'>..."。如果没有这个,我就会在小提琴中出现错误。

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

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

});

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

答案 1 :(得分:1)

离开你的JS小提琴,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());
});