選擇選擇顯示組標籤和選項選擇

我選擇了與optdorup和相同的選項，我想顯示optgroup標籤&選定的選項中選擇。請檢查我的代碼&建議更改。檢查此琴選擇選擇顯示組標籤和選項選擇

$(".chosen-select").chosen(); 
 

 
$(".chosen-select").on('change', function (event,el) { 
 
    var selected_element = $(".chosen-select option:contains("+el.selected+")"); 
 
    
 
    var selected_value = selected_element.val(); 
 
    var parent_optgroup = selected_element.closest('optgroup').attr('label'); 
 
    
 
    selected_element.text(parent_optgroup+' - '+selected_value).trigger("chosen:updated"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js"></script> 
 

 
<select data-placeholder="Your Favorite Football Team" class="chosen-select" tabindex="5"> 
 
      <option value=""></option> 
 
      <optgroup label="NFC EAST"> 
 
      <option value="Dallas Cowboy">Dallas Cowboys</option> 
 
      <option value="New York">New York Giants</option> 
 
      <option value="Philadelphia">Philadelphia Eagles</option> 
 
      <option value="Washington">Washington Redskins</option> 
 
      <optgroup> 
 
      <optgroup label="NFC NORTH"> 
 
      <option value="Dallas Cowboy">Dallas Cowboys</option> 
 
      <option value="New York">New York Giants</option> 
 
      <option value="Philadelphia">Philadelphia Eagles</option> 
 
      <option value="Washington">Washington Redskins</option> 
 
      </optgroup> 
 
      
 
     </select>

來源

2017-08-03 Vishaal M

嘗試通過插件提供的選項。 http://jsfiddle.net/kajalc/n1cnc53c/

$(".chosen-select").chosen({include_group_label_in_selected:true});

來源

2017-08-03 18:08:25 Kajal

嘗試這樣的代碼：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<!-- CSS --> 
 
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css"> 
 
<!-- JS --> 
 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 
    <script> 
 
    $(document).ready(function(){ 
 
    $('.chosen').chosen().change(
 
     function (evt) { 
 
      var label = $(this.options[this.selectedIndex]).closest('optgroup').prop('label'); 
 
      alert(label); 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
<select class="chosen" style="width:300px;"> 
 
    <optgroup label="fruit"> 
 
     <option value="1">apples</option> 
 
     <option value="2">pears</option> 
 
    </optgroup> 
 
    <optgroup label="veg"> 
 
     <option value="3">neeps</option> 
 
     <option value="4">tatties</option> 
 
    </optgroup> 
 
    <optgroup label="omnivore"> 
 
     <option value="5">bear</option> 
 
     <option value="6">rats</option> 
 
    </optgroup> 
 
</select> 
 
</body> 
 
</html>

來源

2017-08-03 17:28:09

請添加一點說明。什麼是問題，你的代碼如何解決它？或者爲什麼你的代碼有改進？ –

它應該顯示水果蘋果，並根據要求只有optgorup標籤是不同的選項是相同的 –

請檢查 http://jsfiddle.net/x5q95a11/ –

檢查這是否是您所期望的。 http://jsfiddle.net/kajalc/qnjhb2Lr/

更換

selected_element.text(parent_optgroup+' - +selected_value).trigger("chosen:updated");

與

$('.chosen-single>span').text(parent_optgroup + ' - ' + selected_value).trigger("chosen:updated");

來源

2017-08-03 17:34:25 Kajal

沒有不工作，當我從第二組選擇選項，其不顯示組它的名字顯示第一組標籤 –

選擇選擇顯示組標籤和選項選擇

回答

相關問題