CODEWITHSUNDEEP
jquery
Vladimir Stus
Vladimir Stus

Reputation: 75

Create dropdown menu with jQuery

I have a JSON response which creates dropdown, menu. In this response I have ID, Name, and 3rd option selected. I am trying to add if both values are false, add text option which would be disabled and (called choose option). Any ideas how to do this?

var arr = [{"uid":"95bf721c-8c24-432e-83e4-7233169f23fa","name":"MARKETING I MARKETING MENAD\u017dMENT","selected":false},{"uid":"ed4293ff-9c89-4052-9fec-852d34c6150d","name":"PRODAJA I MENAD\u017dMENT PRODAJE","selected":true}];

var sel = $('<select/>');
for (var i = 0;i<arr.length;i++) {
    var obj = arr[i];
    var opt = $('<option/>');
    opt.val(obj.uid).text(obj.name)[0].selected = obj.selected;
    sel.append(opt);
}
$('.placeholder').append(sel);

in fiddle example http://jsfiddle.net/xhh4wqv7/

Upvotes: 0

Views: 65

Answers (5)

Lumi Lu
Lumi Lu

Reputation: 3305

added hard-coded choose option munu as first no selection purpose. Can find it @ FIDDLE

var noOption = '<option>choose option</option>';
sel.append(noOption);

So your js code will be

var arr = [{"uid":"95bf721c-8c24-432e-83e4-7233169f23fa","name":"MARKETING I MARKETING MENAD\u017dMENT","selected":false},{"uid":"ed4293ff-9c89-4052-9fec-852d34c6150d","name":"PRODAJA I MENAD\u017dMENT PRODAJE","selected":false}];

var sel = $('<select/>');
var noOption = '<option id="noOpt">choose option</option>';
sel.append(noOption);
for (var i = 0;i<arr.length;i++) {
    var obj = arr[i];
    var opt = $('<option/>');
    opt.val(obj.uid).text(obj.name)[0].selected = obj.selected;
    sel.append(opt);
}
$('.placeholder').append(sel);

sel.on('change', function(){
    $('#noOpt').val('');
    alert($('#noOpt').val());
});

Updated per OP asking to remove first option value.

Upvotes: 1

Jai
Jai

Reputation: 74738

I guess you need something like this:

var arr = [{
  "uid": "95bf721c-8c24-432e-83e4-7233169f23fa",
  "name": "MARKETING I MARKETING MENAD\u017dMENT",
  "selected": false
}, {
  "uid": "ed4293ff-9c89-4052-9fec-852d34c6150d",
  "name": "PRODAJA I MENAD\u017dMENT PRODAJE",
  "selected": true
}];

var sel = $('<select/>'),
    found = false,
  choose = '<option>Choose</option>';

$.each(arr, function(i, obj) {
  $('<option/>', {
    value: obj.uid,
    text: obj.name,
    "selected":obj.selected
  }).appendTo(sel);
  
   found = !obj.selected;
  
});

  if(found){
     sel.prepend(choose);
  }



$('.placeholder').append(sel);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='placeholder'></div>

Upvotes: 1

Umesh Sehta
Umesh Sehta

Reputation: 10683

Check Demo here:
When no any value in array selected, then new option will selected as true.

http://jsfiddle.net/umesh195sehta/xhh4wqv7/7/

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You can declare and check whether any obj.selected is true. Also you can use .prop() to set properties value.

    var sel = $('<select/>');

    //Declare a variable to check if options is selected 
    var hasSelected = false;

    for (var i = 0; i < arr.length; i++) {
        var obj = arr[i];
        var opt = $('<option/>',
                    {
                        value:obj.uid,
                        text: obj.name
                    }).prop("selected", obj.selected);
        sel.append(opt);

        //If any selected is true then it will set variable as false
        if(obj.selected){
           hasSelected = true; 
        }
    }

    //Check if all selected is false 
    if(hasSelected == false){
        var opt = $('<option/>',
                    {
                        text: "Choose option"
                    })
        .prop("disabled", true) //Set option as disabled
        .prop("selected", true); //Set it as selected
        sel.append(opt);
    }

DEMO

Upvotes: 1

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

var arr = [{
  "uid": "95bf721c-8c24-432e-83e4-7233169f23fa",
  "name": "MARKETING I MARKETING MENAD\u017dMENT",
  "selected": false
}, {
  "uid": "ed4293ff-9c89-4052-9fec-852d34c6150d",
  "name": "PRODAJA I MENAD\u017dMENT PRODAJE",
  "selected": false
}];
var totalFalse = 0;
var sel = $('<select/>');
for (var i = 0; i < arr.length; i++) {
  var obj = arr[i];
  if (obj.selected == false) {
    totalFalse++;
  }
  var opt = $('<option/>');
  opt.val(obj.uid).text(obj.name)[0].selected = obj.selected;
  sel.append(opt);
}
// if total false options then add text option to dropdown
if (totalFalse == arr.length) {
  sel.append('<option>Add Text</option>');
}
$('.placeholder').append(sel);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="placeholder"></div>

Upvotes: 1

Related Questions