theo dõi

Gần nhất :

Tags

Thống kê câu hỏi

Chuyên mục : Lập trình
Topic : JavaScript
Hỏi lúc:
Lượt xem: 2,026

jQuery - Mảng không hiển thị các giá trị đúng trong button text?

Huỳnh Đức Công Huỳnh Đức Công
 03  02  00
01 bình chọn hữu ích bởi Đặng Nam Việt

Tôi có một dropdown bootstrap với các checkbox kiểm tra, đây là html của tôi:

<div class="button-group">
    <button type="button" class="dropdown-search-btn" data-toggle="dropdown">Option 1</button>
    <ul class="dropdown-menu">
        <li><a href="#" class="small" data-value="Option 1" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 1</a></li>
        <li><a href="#" class="small" data-value="Option 2" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 2</a></li>
        <li><a href="#" class="small" data-value="Option 3" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 3</a></li>
        <li><a href="#" class="small" data-value="Option 4" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 4</a></li>
        <li><a href="#" class="small" data-value="Option 5" tabIndex="-1"><input type="checkbox" name="makeup"/><span></span>Option 5</a></li>
    </ul>
</div>

Vấn đề của tôi là tôi đang cố gắng để thay đổi button text xổ xuống với bất cứ cái gì hiện đang được kiểm tra là checked trong danh sách dropdown list.

Dưới đây là jQuery của tôi để nhận được giá trị của checkbox đã được đánh là checked và lưu trữ chúng trong một mảng:

$(function(){
    $(".dropdown-menu li a").click(function(){
        var selection = [];
          $.each($("input[name='makeup']:checked"), function(){            
                selection.push($(this).val());
                $(".dropdown-search-btn").text(selection.join(", ")); 
          });
   });
});

Điều này dường như làm việc, nó cho thấy các giá trị chính xác trong giao diện điều khiển. Tuy nhiên, các text button không thay đổi đúng. Ví dụ, nếu mảng có giá trị của "Option 1, Option 2, Option 3" sẽ thay đổi các button text  là "on, on, on" chứ không phải là những gì trong mảng. Sau khi tìm kiếm và làm mọi thứ với điều này trong một vài giờ tôi không thể tìm ra lý do tại sao nó không xuất ra các giá trị đúng. Bất kỳ trợ giúp sẽ được đánh giá cao. Thank all

2,026 xem 04 theo dõi 01 hữu ích hỏi –

Bạn biết ai đó có thể trả lời câu hỏi này?. Bạn có thể giúp đỡ bằng cách tìm những người giỏi nhất:

user user user user user

Phạm Mỹ Hạnh Phạm Mỹ Hạnh
 01  00  01
01 bình chọn hữu ích bởi Đặng Hoài Bảo

Theo mình thì như thế này:

html:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
  <button type="button" class="dropdown-search-btn" data-toggle="dropdown"></button>
  <ul class="dropdown-menu">
    <li>
      <a href="#" class="small" data-value="Option 1" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 1</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 2" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 2</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 3" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 3</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 4" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 4</a>
    </li>
    <li>
      <a href="#" class="small" data-value="Option 5" tabIndex="-1">
        <input type="checkbox" name="makeup" /><span></span>Option 5</a>
    </li>
  </ul>
</div>

js:

$(function() {
  $(".dropdown-menu li a").click(function() {
    var selection = [];
    $.each($("input[name='makeup']:checked"), function() {
      selection.push($(this).parent().text());
    });
    $(".dropdown-search-btn").text(selection.join(", "));
  });
});
1,780 xem 01 hữu ích trả lời –