【问题标题】:Change the text of dropdown menu when an item is selected选择项目时更改下拉菜单的文本
【发布时间】:2015-05-16 05:53:34
【问题描述】:

根据下拉菜单的选择,Rails 应用程序中的文本必须更改。我通过How to change the main display of dropdown when an item is selected in bootstrap 添加了 js 并尝试集成到我的应用程序中,但它不起作用。

%hearder
	%nav.navbar.navbar-job
		.container{class: "text-center"}
			%div{class: "btn-group"}
				%ul.dropdown
					I am 
					%a.btn.dropdown-toggle.btn-job{"data-toggle" => "dropdown","role" => "button"}
						Select 
						%span{class: "caret",id: "dropdown_title"}
					%ul.dropdown-menu{id: "divNewNotifications"}
						%li= link_to "All Jobs", jobs_path
						- Jobcategory.all.each do |jobcategory|
							%li= link_to jobcategory.name, jobs_path(jobcategory: jobcategory.name)

$('.dropdown-toggle').dropdown();
$('#divNewNotifications li').on('click', function() {
    $('#dropdown_title').html($(this).find('a').html());
    });

更新:

%hearder
	%nav.navbar.navbar-job
		.container{class: "text-center"}
			%div{class: "btn-group"}
				%ul.dropdown
					%a.btn.dropdown-toggle.btn-job{"data-toggle" => "dropdown","role" => "button"}
						Select
						%span{class: "caret",id: "dropdown_title"}
					%ul.dropdown-menu{id: "divNewNotifications"}
						%li= link_to "All Creative Jobs", jobs_path
						- Jobcategory.all.each do |jobcategory|
							%li= link_to jobcategory.name, jobs_path(jobcategory: jobcategory.name)
					Designer
  
								
%body
	%div{id:"testing"}
		= render 'testing'
		

dropdown.js

$('#divNewNotifications li').on('click', function() {
    $('.dropdown-toggle').html($(this).find('a').html());
});


$(function(){
	$("#divNewNotifications li").live('click', function(){
		$.get(this.href,null,null,"script");
		return false;
	});
});

index.js.erb

$("#testing").html("<%= escape_javascript(render("testing")) %>");

【问题讨论】:

    标签: javascript jquery twitter-bootstrap jquery-ui twitter-bootstrap-3


    【解决方案1】:

    我想你想做这样的事情..

    $('#divNewNotifications li').on('click', function() {
        $('.dropdown-toggle').html($(this).find('a').html());
    });
    

    http://www.bootply.com/9KeT6fk2PM

    您不需要使用$('.dropdown-toggle').dropdown();,因为按钮上使用了 data-toggle 属性。

    【讨论】:

    • 嗨,感谢您的回复,我尝试了您的代码,在选择下拉菜单时,文本更改了,但选择的菜单是页面刷新的链接,所以当页面刷新和所选菜单时文本丢失,并恢复为默认值。例如,我的索引页是 localhost:3000 下拉菜单是“所有工作”,当我从下拉菜单中选择图形时,它的 localhost:3000/jobs?jobcategory=Graphic ... 但直到下拉菜单中的所有工作
    • 嗨,我已经更新了我现在正在尝试使用 ajax 的代码,你能检查一下代码
    猜你喜欢
    • 1970-01-01
    • 2015-06-23
    • 1970-01-01
    • 1970-01-01
    • 2013-08-22
    • 1970-01-01
    • 2020-05-14
    • 2018-02-16
    • 1970-01-01
    相关资源
    最近更新 更多