Converting list box to checkboxes

问题

I am having one dropdown and when I select one item from that dropdown a list appears corresponding to that item comes from a json in the list box. But I don't want to have list box, I want to have checkboxes so that I can select multiple items. I'm trying to convert this list box into checkboxes but not getting the intended result.. Please help!!!

This is my javascript code

 $('#dropdown1').change(function () {
     $('#listbox').empty();

     $('<option>', {
         text: 'Select your List Option',
         value: '',
         selected: 'selected',
         disabled: 'disabled'
     }).appendTo('#listbox');

     var selection = $('#dropdown1 :selected').text();
     //   var selection = $('#dropdown1 :selected').text();
     $.each(jsObject, function (index, value) {
         if(value['name'] == selection) {
             var optionHtml = '';
             for(var i = 1; i <= 20; i++) {
                 var attr = 'attr' + ('000' + i).substr(-3);
                 optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
             }
             $('#listbox').append(optionHtml);
             return false;
         }
     });
 });

This is my html code

<form name="myform" id="myForm">

    <select id="dropdown1"></select>
    <select id="listbox", multiple></select>
    <br>


</form>

More js code

$(document).ready(function() {

    $.ajax({
        url: "data.json",
        dataType: "json",
        success: function(obj) {
            var jsObject = obj;
            var usedNames = [];

            $('<option>', {
                text: 'Select your Option',
                value: '',
                selected: 'selected',
                disabled: 'disabled'
            }).appendTo('#dropdown1');

            $.each(obj, function(key, value) {
                if (usedNames.indexOf(value.name) == -1) {
                    $("#dropdown1").append("<option value=" + key + ">" + value.name + "</option>");
                    usedNames.push(value.name);
                }

回答1:

After filling the dropdown with what you required, when u select an option the data u get instead of making a <select> make a <div>. Then fill the div with:

<input type="checkbox" name="yourDataName" value="yourDataName">yourDataName</input>

Check this demo on jsfiddle : https://jsfiddle.net/jagrati16/s566ss58/

This is just a demo. Hope it solves your problem

Change this:

$.each(jsObject, function (index, value) {
         if(value['name'] == selection) {
             var optionHtml = '';
             for(var i = 1; i <= 20; i++) {
                 var attr = 'attr' + ('000' + i).substr(-3);
                 optionHtml += '<option value="' + attr + '">' + value[attr] + '</option>';
             }
             $('#listbox').append(optionHtml);
             return false;
         }
     });

to this:

var check = '';
 $.each(jsObject, function (index, value) {
         if(value['name'] == selection) {

             for(var i = 1; i <= 20; i++) {
                 var attr = 'attr' + ('000' + i).substr(-3);
                 check += '<input type="checkbox" name="'+attr+'" value="' + attr + '">' + value[attr] + '<br>';
             }
             $('#listbox').append(check);
         }
     });

来源：https://stackoverflow.com/questions/36541973/converting-list-box-to-checkboxes

标签

javascript

jquery

html

checkbox