10 examples of 'dynamic multi select dropdown with checkbox jquery' in JavaScript

146
function dropdown(id, onchange, current_value, item_list, disabled) {
147
    //
148
    // Creates a dropdown for toggling options.
149
    //
150
    // item_list format: [[label, value, disabled], [..], [..]]
151
    //
152
    var items_html = "";
153
    for (i = 0; i < item_list.length; i++) {
154
        var label = item_list[i][0];
155
        var value = item_list[i][1];
156
        var greyed = item_list[i][2];
157
        items_html += ``;
158
    }
159
160
    return `${items_html}`;
161
}

191
function addSelectOption(optionId, disabled) {
192
193
	// add an 
194
	// used only by buildSelect()
195
196
	if(disabled == undefined) var disabled = false; 
197
198
	var jQueryO = jQuery('#' + optionId); 
199
	var jQueryoption = jQuery("")
200
		.val(jQueryO.val())
201
		.attr('rel', optionId);
202
203
	if(disabled) disableSelectOption(jQueryoption); 
204
205
	jQueryselect.append(jQueryoption); 
206
}

191
function addSelectOption(optionId, disabled) {
192
193
	// add an 
194
	// used only by buildSelect()
195
196
	if(disabled == undefined) var disabled = false; 
197
198
	var $O = $('#' + optionId); 
199
	var $option = $("")
200
		.val($O.val())
201
		.attr('rel', optionId);
202
203
	if(disabled) disableSelectOption($option); 
204
205
	$select.append($option); 
206
}

20
function setDropdownValues($dropdown, values, selectedValue) {
21
    $dropdown.empty();
22
    var optionsAsString = '';
23
    // add an empty string to the beginning for empty selection
24
    values.unshift('');
25
    $.each(values, function () {
26
        optionsAsString += "";
27
    });
28
    $dropdown.append($(optionsAsString));
29
}

822
function makeDropdownInput(inputId, field, value, form) {
823
  var select = $('').attr('id', inputId);
824
  addDropdownOptions(field, select);
825
  if (typeof value === 'boolean') {
826
    value = value.toString();
827
  }
828
  select.val(value);
829
  if (field.onChange) {
830
    select.change(function() {
831
      var val = this.value;
832
      if (field.convertToBoolean) {
833
        val = convertToBoolean(val);
834
      }
835
      field.onChange(val, form);
836
    });
837
  }
838
  return select;
839
}

67
populateDropdown() {
68
    const nArgs = this.populateArguments();
69
    const prompts = this.model.conditionalChoices(nArgs);//  scope.select({ args: nArgs });
70
    prompts.then((cvms: ViewModels.ChoiceViewModel[]) => {
71
        // if unchanged return 
72
        if (cvms.length === this.currentOptions.length && _.every(cvms, (c, i) => c.equals(this.currentOptions[i]))) {
73
            return;
74
        }
75
        this.model.choices = cvms;
76
        this.currentOptions = cvms;
77
    }).catch(() => {
78
        // error clear everything 
79
        this.model.selectedChoice = null;
80
        this.currentOptions = [];
81
    });
82
}

163
hideDropdown(...args) {
164
  if (this.isDirectionUsing) {
165
    return;
166
  }
167
168
  super.hideDropdown(...args);
169
}

49
function disableSelect(chkbox) {
50
  var sibling = chkbox;
51
  while (sibling != null) {
52
    if (sibling.nodeType == 1 && sibling.tagName.toLowerCase() == "select") {
53
      $(sibling).prop('disabled', !chkbox.checked);
54
    }
55
    sibling = sibling.previousSibling;
56
  }
57
}

19
wrapWithCheckBox(option, isSelected) {
20
  return (
21
    
22
      {option.value}
23
    
24
  );
25
}

17
function enableMultiSelect(chkboxes) {
18
    var lastChecked = null;
19
    chkboxes.click(function (e) {
20
        if (!lastChecked) {
21
            lastChecked = this;
22
            return;
23
        }
24
        if (e.shiftKey) {
25
            var start = chkboxes.index(this);
26
            var end = chkboxes.index(lastChecked);
27
            chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop('checked', lastChecked.checked);
28
        }
29
        lastChecked = this;
30
    });
31
}