我已经查看了与我类似的所有问题，似乎无法解决这个问题。我想在更改另一个下拉菜单时更改一个下拉菜单中显示的信息。
这就是我所拥有的：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css"/>
<link href="simple-scrollbar.css" rel="stylesheet"/>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Bud, Branch & Blossom Landscaping, LLC</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://buzinas.github.io/simple-scrollbar/simple-scrollbar.min.js"></script>
</head>
<body>
<div id="media-box">
<a href="#"><img id="linkedin" class="media" src="images/linkedin.png" title="Linkedin"/></a>
<a href="#"><img id="houzz" class="media" src="images/houzz.png" title="Houzz"/></a>
<a href="#"><img id="instagram" class="media" src="images/instagram.png" title="Instagram"/></a>
<a href ="#"><img id="facebook" class="media" src="images/facebook.png" title="Facebook"/></a>
<a class="contact-info phone" href="tel:+15175151723">(517)-515-1723</a>
<a class="contact-info email" href="#">Contact us today!</a>
</div>
<div id="banner">
<div id="banner-text">
<p id="maintenance" class="banner-text">MAINTENANCE.</p>
<p id="installation" class="banner-text">INSTALLATION.</p>
<p id="design" class="banner-text">DESIGN.</p>
</div>
<div id="navbar">
<p id="about" class="nav-text">About Us</p>
<p id="gallery" class="nav-text">Our Work</p> <!-- Whichever one Tommy likes better. -->
</div>
</div>
<!-- Everything on top of the banner -->
<div id="logo"><img src="images/whitelogo.png"/></div>
<!-- Content -->
<div id="box">
<div class="first box">
<img class="left arrow" src="images/left_arrow.png"/>
<img class="right arrow" src="images/right_arrow.png"/>
<div class="first page intro">
<p>Bud, Branch & Blossom Landscaping is a small, independent landscaping firm that serves the Greater Lansing area.</p>
<p>We perform a variety of landscaping services, including landscape design, plant installation and removal, hardscaping, and lawn maintenance.</p>
<p>Bud, Branch & Blossom is also an active member of the Michigan Nursery and Landscape Association (MNLA), and is approved by the Michigan Department of Agriculture and Natural Resources (MDANR).</p>
</div>
<div class="first page intro">
<p>Tommy we need another testimonial yo.</p>
</div>
</div>
<!-- Second page -->
<div class="second box">
<div id="title" class="second page">
<p id="title-text">About Us</p>
</div>
<div class="second page main" ss-container>
<p>Bud, Branch & Blossom owner Tommy Morgan has spent years researching plants, shrubs, and trees. Before forming the company, he redesigned spaces in his own yard, honing his understanding of how textures and colors fit beside each other in garden beds. That appreciation for landscape composition serves his customers well. He enjoys making connections with his clients and getting to spend time outdoors doing what he loves.</p>
<p>The business started with a few small design projects, supplemented by several lawn mowing jobs. A year after forming the company, Tommy hired his first employees – people who, as he says, “understand that all of the work we do is in service to our customers.” He’s invested in top-of-the-line equipment, with brands like Exmark, Stihl, and Redmax lining our equipment racks.</p>
</div>
</div>
<!-- Third page -->
<div class="third box">
<div id="left" class="third page" ss-container>
<p>Design work allows us to share our creativity with our customers. Owner Tommy Morgan enjoys creating artwork with natural components. When designing a garden, many important factors must be considered, such as light, soil conditions, water, drainage conditions, and location. </p>
<p>The first step of the design process involves a free initial consultation. This allows us to understand your needs, and gives us an opportunity to see and understand the space. Following this, a design will be presented to you, along with pictures of plants/materials being used, and an estimate of the cost.</p>
</div>
</div>
</div>
<footer class="page">Copyright © Bud, Branch & Blossom Landscaping, LLC. All rights reserved.</footer>
<script type="text/javascript"> // Hover effects
// Elements
var fb = document.getElementById('facebook');
var ig = document.getElementById('instagram');
var hz = document.getElementById('houzz');
var li = document.getElementById('linkedin');
// Social media
fb.addEventListener('mouseover', function() {
fb.src = "images/facebook_hover.png";
});
fb.addEventListener('mouseleave', function() {
fb.src = "images/facebook.png";
});
ig.addEventListener('mouseover', function() {
ig.src = "images/instagram_hover.png";
});
ig.addEventListener('mouseleave', function() {
ig.src = "images/instagram.png";
});
hz.addEventListener('mouseover', function() {
hz.src = "images/houzz_hover.png";
});
hz.addEventListener('mouseleave', function() {
hz.src = "images/houzz.png";
});
li.addEventListener('mouseover', function() {
li.src = "images/linkedin_hover.png";
});
li.addEventListener('mouseleave', function() {
li.src = "images/linkedin.png";
});
</script>
<script type="text/javascript"> // PAGE SCRIPT
function test() {
xleft = document.getElementById('box').style.left;
console.log(xleft);
if(xleft == '-500%') {
$('.right').css('visibility', 'hidden');
} else {
$('.right').css('visibility', 'visible');
}
}
$('.right').click(function() {
$('#box').animate({
left: '-=100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.left').click(function() {
$('#box').animate({
left: '+=100%'
}, 400);
if(xleft == '-200%') {
$('.left').css('visibility', 'hidden');
} else {
$('.left').css('visibility', 'visible');
}
});
$('#about').click(function() {
$('#box').animate({
left: '-100%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#design').click(function() {
$('#box').animate({
left: '-200%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#installation').click(function() {
$('#box').animate({
left: '-300%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#maintenance').click(function() {
$('#box').animate({
left: '-400%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('#gallery').click(function() {
$('#box').animate({
left: '-500%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
$('.email').click(function() {
$('#box').animate({
left: '-600%'
}, 400);
$('.left').css('visibility', 'visible');
test();
});
</script>
</body>
</html>以上下拉列表将更改此下拉列表：
<div class="dropdown">
<button class="btn btn-default dropdown-toggle product-dropdown" type="button"
id="dropdownMenu1" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
Product Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu product" aria-labelledby="dropdownMenu1">
<li><a href="#">Banner</a></li>
<li><a href="#">Magnet</a></li>
<li><a href="#">Sticker</a></li>
<li><a href="#">Decal</a></li>
<li><a href="#">Yard Sign</a></li>
<li><a href="#">Digital Print</a></li>
<li><a href="#">Business Sign</a></li>
</ul>
</div>
我想要改变选项标题，我已经实现了。此外，我希望下拉菜单更改。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle option-dropdown" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
Options
<span class="caret"></span>
</button>
<ul class="dropdown-menu option" aria-labelledby="dropdownMenu1">
<li><a href="#">test</a></li>
</ul>
</div>
上面的Javascript正在运行，但我希望第二个下拉列表中包含以下信息：
$(".product li a").click(function() {
$(".product-dropdown:first-child").html($(this).text() + ' <span class="caret"></span>');
});
$(".product li a").click(function() {
$(".option-dropdown:first-child").html($(this).text() + " Option's"+ ' <span class="caret"></span>');
});