多個下拉值引導

Question

嗨我試圖將ul > li轉換爲select > option，如果我選擇dropdown列表中的第一個選項，應該查看它。我完成了它，但是當我在單個頁面中使用它兩次時出現錯誤。

$(".dropdown-menu").on('click', 'li a', function(){ 
 
    $(".btn:first-child").text($(this).text()); 
 
    $(".btn:first-child").val($(this).text()); 
 
});

*{ 
 
    border-radius: 0 !important; 
 
} 
 
li{ 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<li role="presentation" class="dropdown"> 
 
    <label>Quantity 
 
    <a href="#" class="dropdown-toggle btn btn-default" id="drop5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
     Select 
 
     <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu" id="menu2" aria-labelledby="drop5"> 
 
     <li><a href="#">In Stock</a></li> 
 
     <li><a href="#">Out of Stock</a></li> 
 
    </ul> 
 
    </label> 
 
</li> 
 
<hr> 
 
<li role="presentation" class="dropdown"> 
 
    <label>Quantity 
 
    <a href="#" class="dropdown-toggle btn btn-default" id="drop5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
     Select 
 
     <span class="caret"></span> 
 
    </a> 
 
    <ul class="dropdown-menu" id="menu2" aria-labelledby="drop5"> 
 
     <li><a href="#">Price</a></li> 
 
     <li><a href="#">Dollar</a></li> 
 
    </ul> 
 
    </label> 
 
</li>

Answer 1

爲了更改下拉列表的標題，您只需要更改文本屬性而不是值。

此外，您的下拉列表包含標題加上圖形（即：脫字號）。如果要保留下拉外觀，則不能更改此元素。

這意味着：

• 得到closest下拉元素對應於當前點擊的元素： $（本）.closest（ '下拉菜單'）
• 發現這裏面的片段按鈕： $ （本）.closest（ '下拉'）。 find爲了得到所有的DOM元素（「.btn」）
• 使用contents（1.文本節點：標題; 2.跨度節點：跨度節點; 3.文本節點：一個新行）
• filter這個列表中的nodeType == textNode和文本內容不爲空

的片段：

$(".dropdown-menu").on('click', 'li a', function(){ 
 
    $(this).closest('.dropdown').find('.btn').contents().filter(function(idx, ele) { 
 
     return this.nodeType == Node.TEXT_NODE && this.textContent.trim().length != 0; 
 
    }).get(0).textContent = this.textContent + ' '; 
 
});

*{ 
 
    border-radius: 0 !important; 
 
} 
 
li{ 
 
    list-style: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 

 
<li role="presentation" class="dropdown"> 
 
    <label>Quantity 
 
     <a href="#" class="dropdown-toggle btn btn-default" id="drop5" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
      Select 
 
      <span class="caret"></span> 
 
     </a> 
 
     <ul class="dropdown-menu" id="menu2" aria-labelledby="drop5"> 
 
      <li><a href="#">In Stock</a></li> 
 
      <li><a href="#">Out of Stock</a></li> 
 
     </ul> 
 
    </label> 
 
</li> 
 
<hr> 
 
<li role="presentation" class="dropdown"> 
 
    <label>Quantity 
 
     <a href="#" class="dropdown-toggle btn btn-default" id="drop55" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
 
      Select 
 
      <span class="caret"></span> 
 
     </a> 
 
     <ul class="dropdown-menu" id="menu22" aria-labelledby="drop55"> 
 
      <li><a href="#">Price</a></li> 
 
      <li><a href="#">Dollar</a></li> 
 
     </ul> 
 
    </label> 
 
</li>

Answer 2

當您設置的值和文本，要更換選擇匹配所有DOM節點。嘗試像這樣改爲，

$(".dropdown-menu").on('click', 'li a', function(e){ 
    $(".btn:first-child", $(e.target).closest('.dropdown')).text($(this).text()); 
    $(".btn:first-child", $(e.target).closest('.dropdown')).val($(this).text()); 
});