CODEWITHSUNDEEP
javascriptjqueryhtmlselectjquery-chosen
Brian Crist
Brian Crist

Reputation: 814

How to hide search on single select chosen jquery?

I've read in chosen jquery at http://harvesthq.github.io/chosen/ . Ok i want to "Hide Search on Single Select" as same example in that (example in guthub/chosen above), such as FLAG=false hide them. How can i do it? 

var data = [{
    "BU_ID": "B01",
        "BU_NAME": "Agro Feed",
        "BU_DES": "Agro Feed",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": true
}, {
    "BU_ID": "B02",
        "BU_NAME": "Agro Farm",
        "BU_DES": "Agro Farm",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": false
},{
    "BU_ID": "B03",
        "BU_NAME": "Agro Food",
        "BU_DES": "Agro Food",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": true
}
           ];

$("#cb_info").empty();
$.each(data, function (idx, obj) {
    $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
}); 
$("#cb_info").chosen({ width: "auto" });
$("#cb_info").trigger("chosen:updated");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.js"></script>
<select id="cb_info"></select>

Thank guys.

Upvotes: 0

Views: 180

Answers (2)

guradio
guradio

Reputation: 15565

var data = [{
    "BU_ID": "B01",
        "BU_NAME": "Agro Feed",
        "BU_DES": "Agro Feed",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": true
}, {
    "BU_ID": "B02",
        "BU_NAME": "Agro Farm",
        "BU_DES": "Agro Farm",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": false
}, {
    "BU_ID": "B03",
        "BU_NAME": "Agro Food",
        "BU_DES": "Agro Food",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": true
}];

$("#cb_info").empty();
$.each(data, function (idx, obj) {
    if (obj.FLAG === true) {
        $("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
    }
});

Just add a condition if (obj.FLAG === true) { only flag with true will be added on the list therefor you don't need to hide anything

DEMO

UPDATED

demo

Upvotes: 1

John
John

Reputation: 1489

Your question is not that clear . But if what you want is to disable items with FLAG:false then just specify the disabled property for those options.

var data = [{
    "BU_ID": "B01",
        "BU_NAME": "Agro Feed",
        "BU_DES": "Agro Feed",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": true
}, {
    "BU_ID": "B02",
        "BU_NAME": "Agro Farm",
        "BU_DES": "Agro Farm",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": false
},{
    "BU_ID": "B03",
        "BU_NAME": "Agro Food",
        "BU_DES": "Agro Food",
        "EDIT_DATE": "2015-05-05T00:00:00",
        "EDIT_BY": "",
        "FLAG": true
}
           ];

$("#cb_info").empty();
$.each(data, function (idx, obj) {
var status = (!obj.FLAG)?'disabled':'';
    $("#cb_info").append('<option '+status+' value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
}); 
$("#cb_info").chosen({ width: "auto" });
$("#cb_info").trigger("chosen:updated");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.0/chosen.jquery.js"></script>
<select id="cb_info"></select>

Upvotes: 1

Related Questions