Question

我想使用列表项添加多个下拉列表，以便执行以下操作：当我点击ul，列表项下拉，然后我点击列表项时，该列表的值必须替换当前用作占位符的列表中的值。

它与我发现的fiddle基本相同，但我正努力让它在codepen here

中运行

我的JavaScript不是很先进，所以我希望你能提供帮助。

如何让我的代码功能就像普通的选择标签一样？我没有使用select标签，因为我打算使用特定的样式来选择和选项标签不允许。

＆＃13;

$(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() {});
});

＆＃13;

.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;
}

ul.which-way {
  cursor: pointer;
  padding: 0;
}

li.open-list {
  display: block !important;
}

.find {
  margin-bottom: 10px;
  display: inline-block;
  width: 100%;
}

＆＃13;

<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>Darling Wine & Beer Trip</li>
      <li data-value="value 3" class="cadja"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span>Culture & Adventure Trip</li>
      <li data-value="value 4" class="cadja"><span class="value">cape-west-coast-wildlife-fossil-trip</span>Wildlife & Fossils Trip</li>
    </ul>
    <a href="#" id="trip" class="find">FIND YOUR TRIP</a>
  </div>

  <ul class="which-way">
    <li class="which-init">Unguided I-Day Return Trips</li>
    <li data-value="value 2"><span class="value">darling-wine-hops-day-by-which-way</span>Darling Wine & Beer Trip</li>
    <li data-value="value 3"><span class="value">mamre-werf-khwa-ttu-culture-day-by-which-way-trips</span>Culture & Adventure Trip</li>
    <li data-value="value 4"><span class="value">cape-west-coast-wildlife-fossil-trip</span>Wildlife & Fossils Trip</li>
  </ul>
  <a href="#" id="trip" class="find">FIND YOUR TRIP</a>
</div>
</div>

＆＃13;

Answer 1

所以这应该做的工作，如果你想支持旧的IE（7/8），你必须检查IE并使用textContent（代码取自你的代码）

$(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(){
          //will log your text, this is the selected element in onClicks
          console.log(this.innerText);
          //get the parent element and find the which-init and replace the text 
        this.parentElement.getElementsByClassName('which-init')[0].innerText = this.innerText;
      });
});

好的，我希望我能理解你，也许这会有所帮助。我在jquery中做了一个洞，所以它看起来有点不同

$(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(){
          //will log your text, this is the selected element in onClicks
          console.log($(this).html());
          //get the parent element and find the which-init and replace the all spans and set it in wich-init (maybe you will find a better name) 
          $($(this).parent().find('.which-init')[0]).html($(this).html());
        // so u need the value of this selected element we make this to a jquery type element and log it
        console.log('the value from onClick: ', $($(this).find('span.value')[0]).text());
        //do something with your value here :)
        //maybe call a handler for dropdown-one, make a generic one (handler) or write one for dropdown-two
        handleDropdownOne();

      });  
});

//not best practice but it is for explanation
window.handleDropdownOne = function() {
  //will log the value if the user selected something in the first dropdown, the selector is rly ugly :)
  var dropOneValue = $($($('.drowpdown-one').find('.which-init')[0]).find('span.value')[0]).text();
  console.log('from handleDrpdownOne function: ', dropOneValue);
};

//call the function on start, it is undefined
handleDropdownOne();

如何使用列表项进行下拉列表工作并从中获取值

1 个答案: