发表新帖
发表新帖

How to hide or remove options from jQuery Chosen select dropdown

前端 未结
关注
5 1214
野性不改
野性不改 2021-01-11 19:56

I would like to hide certain elements from a dropdown that is created using the Chosen plugin.

I have tried removing it:

$( \'option:contains(\"Swatc
相关标签:
5条回答
  • 忘了有多久
    2021-01-11 20:12

    Here's a jquery snipped to deselect and update a chosen ddl that is designated as multiple. ddlID is the ID of the chosen ddl and ddlValue is the value property of the option.

    $("#ddlID option[value='" + ddlValue + "']").prop('selected', false);
$("#ddlID").trigger("chosen:updated");
    0 讨论(0)
  • 南旧
    2021-01-11 20:21

    Small edit of kamijean's code: 

     $('select.chosen-result option:contains("Swatch 1")').hide();
 $('select.chosen-result').trigger("chosen:updated");

    so not chosen-select but chosen-result and not options but option

    for selecting by values and not title use

     $('select.chosen-result option[value=830]').hide();
 $('select.chosen-result').trigger("chosen:updated");
    0 讨论(0)
  • 走了就别回头了
    2021-01-11 20:24

    hide the option and update....

    $('#button').click(function(){
        $('select#theIDselect > option[value="Swatch 1"]').hide();
        $('#theIDselect').trigger("chosen:updated");
    });
    0 讨论(0)
  • 佛祖请我去吃肉
    2021-01-11 20:37

    In the original select you need to hide the option. For example:

    $('select.chosen-select options:contains("Swatch 1")');

    Then update the chosen options with:

    $('select.chosen-select').trigger("chosen:updated");

    If you have more than one chosen drop down on the page then it probably would be better to use a more specific id or class on that element in the place of $('select.chosen-select'). So your code would become:

    $('#swatch_select options:contains("Swatch 1")');
$('#swatch_select').trigger("chosen:updated");
    0 讨论(0)
  • 心在旅途
    2021-01-11 20:38

    You can hide with value or with class name. Check working code here.

    <select id="dd_option" data-placeholder="Select one..." class="chzn-select" style="width:350px;" tabindex="2">
    <option value="all" selected="selected"> All </option>
    <option  value="mls" class="list_srch"> #MLS Number </option>
    <option  value="zip" class="list_srch"> Zip/Postal </option>
    <option value="title"> Listing Title </option>
    </select>
<button type="button" id="btn_hide_val">Hide with value</button>
<button type="button" id="btn_hide_class">Hide with class</button>
<button type="button" id="btn_unhide">Unhide</button>
<script>


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

$('#btn_hide_val').click(function() {

    // Just hide option #MLS Number,  Zip/Postal
    $("#dd_option option[value='mls']").hide();
    $("#dd_option option[value='zip']").hide();
    $("#dd_option").trigger("chosen:updated");
        
});
$('#btn_hide_class').click(function() {

    // Just hide option  #MLS Number,  Zip/Postal
    $("#dd_option option[class='list_srch']").hide();

    $("#dd_option").trigger("chosen:updated");
        
});
  
$('#btn_unhide').click(function() {

    // Just hide option 4
    $("#dd_option option[class='list_srch']").show();
        
    $("#dd_option").trigger("chosen:updated");
        
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html lang="en"> 
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
</head>
<body>
  <form>
  <div id="container">
    <h3>Show/Hide options with value and class</h3>
    <select id="dd_option" data-placeholder="Select one..." class="chzn-select" style="width:350px;" tabindex="2">
        <option value="all" selected="selected"> All </option>
        <option  value="mls" class="list_srch"> #MLS Number </option>
        <option  value="zip" class="list_srch"> Zip/Postal </option>
        <option value="title"> Listing Title </option>
        </select>
        <br /><br />

    <button type="button" id="btn_hide_val">Hide with value</button>
    <button type="button" id="btn_hide_class">Hide with class</button>
    <button type="button" id="btn_unhide">Unhide</button>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" type="text/javascript"></script>

    0 讨论(0)
 看不清?
提交回复
热议问题