如何使用jquery多个下拉列表

时间：2017-05-05 05:54:18

标签： javascript jquery html css

我想在我的网站上执行以下操作 -

当我点击列表项时，它必须从带有类值的span标记中获取文本。因此，当我单击与该列表相关的按钮时，它应该将收集的文本附加到链接引用。

目前，我的代码仅适用于第一个列表项。当我为下一个项目执行相同操作时，它会为我提供第一个列表项的数据。

这是我的代码 - 

$(document).ready(function() {
  var dropOneValue = "";
  $("ul.which-way").on("click", function() {
    $(this).find('li').toggleClass("open-list");
    $(this).find('open-list').css("display", "block");
  });
  $("li.cadja").on("click", function() {
    dropOneValue = ""
    $($(this).parent().find('.which-init')[0]).html($(this).html());
    handleDropdownOne();
  });
});
window.handleDropdownOne = function() {
  dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text();
  console.log(dropOneValue);
};
handleDropdownOne();
$('a#trip').on("click", function() {
  $(this).attr("href", "https://www.westcoastway.co.za/" + dropOneValue);
});
.which-wrapper {
  width: 100%;
  max-width: 300px;
}

ul.which-way {
  margin: 0;
  list-style: none;
  background-color: grey;
  margin-bottom: 5px;
}

ul.which-way li:not(:first-child) {
  display: none;
}

.value {
  display: none !important;
}

ul.which-way {
  cursor: pointer;
  padding: 0;
}

.value {
  display: none;
}

li.open-list {
  display: block !important;
}

.find {
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="which-wrapper">
  <div class="drowpdown-one dropdown">
    <ul class="which-way">
      <li class="which-init">Unguided I-Day Return Trips</li>
      <li data-value="value 2" class="cadja"><span class="value">darling-wine-hops-day-by-which-way</span><span class="real">Darling Wine & Beer Trip</span></li>
      <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span><span class="real">Culture & Adventure Trip</span></li>
      <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span><span class="real">Wildlife & Fossils Trip</span></li>
    </ul>
    <a href="#" target="__blank" id="trip" class="find">FIND YOUR TRIP</a>
  </div>
  <div class="drowpdown-one dropdown">
    <ul class="which-way">
      <li class="which-init">Guided I-Day Return Trips</li>
      <li data-value="value 2" class="cadja"><span class="value">5-day-west-coast</span><span class="real">5 Day West Coast Explorer</span></li>
      <li data-value="value 3" class="cadja"><span class="value">5-day-namaqua-spring-flower-tour</span><span class="real">5 Day Namaqualand Spring Flower</span></li>
    </ul>
    <a href="#" target="__blank" id="tour" class="find">FIND YOUR TRIP</a>
  </div>
</div>

2 个答案:

答案 0 :(得分：3)

您需要获取相对于您点击的元素的span.value，然后使用新值更改链接的网址：

$(document).ready(function() {
  $("ul.which-way").on("click", function() {
    $(this).find('li').toggleClass("open-list");
    $(this).find('open-list').css("display", "block");
  });
  $("li.cadja").on("click", function() {
    $(this).parent().find('.which-init').html($(this).html());
    var dropOneValue = $(this).find('span.value').text();
    $(this).closest('.dropdown').find('.find').attr("href", "https://www.westcoastway.co.za/" + dropOneValue);

    console.log(dropOneValue);
  });
});
.which-wrapper {
  width: 100%;
  max-width: 300px;
}

ul.which-way {
  margin: 0;
  list-style: none;
  background-color: grey;
  margin-bottom: 5px;
}

ul.which-way li:not(:first-child) {
  display: none;
}

.value {
  display: none !important;
}

ul.which-way {
  cursor: pointer;
  padding: 0;
}

.value {
  display: none;
}

li.open-list {
  display: block !important;
}

.find {
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="which-wrapper">
  <div class="drowpdown-one dropdown">
    <ul class="which-way">
      <li class="which-init">Unguided I-Day Return Trips</li>
      <li data-value="value 2" class="cadja"><span class="value">darling-wine-hops-day-by-which-way</span><span class="real">Darling Wine & Beer Trip</span></li>
      <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span><span class="real">Culture & Adventure Trip</span></li>
      <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span><span class="real">Wildlife & Fossils Trip</span></li>
    </ul>
    <a href="#" target="__blank" id="trip" class="find">FIND YOUR TRIP</a>
  </div>
  <div class="drowpdown-one dropdown">
    <ul class="which-way">
      <li class="which-init">Guided I-Day Return Trips</li>
      <li data-value="value 2" class="cadja"><span class="value">5-day-west-coast</span><span class="real">5 Day West Coast Explorer</span></li>
      <li data-value="value 3" class="cadja"><span class="value">5-day-namaqua-spring-flower-tour</span><span class="real">5 Day Namaqualand Spring Flower</span></li>
    </ul>
    <a href="#" target="__blank" id="tour" class="find">FIND YOUR TRIP</a>
  </div>
</div>

答案 1 :(得分：2)

根据@madalin的回答，让你的jquery像这样：

$(document).ready(function(){
    var dropOneValue = "";
            $("ul.which-way").on("click", function() {
            $(this).find('li').toggleClass("open-list");
            $(this).find('open-list').css("display", "block");
            });
            $("li.cadja").on("click", function(){
                console.log($(this).find('.value').html());
          dropOneValue = $(this).find('.value').html();
           $($(this).parent().find('.which-init')[0]).html($(this).html());
            });  

            $('a#trip').on("click", function(){
                $(this).attr("href", "https://www.westcoastway.co.za/"+dropOneValue);
            });

            $('a#tour').on("click", function(){
                $(this).attr("href", "http://capeytours.co.za/west-coast-tours/"+dropOneValue);
            });
    });

我只是添加了您之前代码中的代码：

$($(this).parent().find('.which-init')[0]).html($(this).html());`
相关问题
最新问题