How to add options to bootstrap multiselect checkbox drop down via fancybox

Question

I have multiselect checkbox drop down. I created fancy box and by entering text field values on the fancy box and by clicking on submit button.

I need to add drop down values or update drop down values dynamically.Please help.

View:-

@{
    ViewBag.Title = "jqtree";
}

<h2>jqtree</h2>
<div class="container">
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          <span class="glyphicon glyphicon-minus"></span>
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          <span class="glyphicon glyphicon-plus"></span>
          hello
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
       <p class="message success" id="callback">Callback target</p>
       <select multiple="multiple" size="5" id="inptProduct">
        @*<optgroup label="Group One">*@
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
            <option value="option3">Option 3</option>
       @* </optgroup>*@
        @*<optgroup label="Group Two">
            <option value="option4">Option 4</option>
            <option value="option5">Option 5</option>
            <option value="option6">Option 6</option>
            <option value="option7">Option 7</option>
        </optgroup>*@
        </select>

          <a href="@Url.Action("To_view", "TodoList")" id="a1">
      <span class="glyphicon glyphicon-plus-sign"></span> 
      </a>         
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          <span class="glyphicon glyphicon-plus"></span>
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
      <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
      </div>
    <link rel="stylesheet" type="text/css" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css" />
    <link rel="stylesheet" type="text/css" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/style.css" />
   <link rel="stylesheet" type="text/css" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/prettify.css" />
      <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" type="text/css" media="screen" />
      <link href="~/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="~/css/bt.css" rel="stylesheet" type="text/css" />

    <script src="~/Scripts/jquery-1.9.1.min.js"></script>
      <script src="~/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

    <script type="text/javascript" src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<script type="text/javascript" src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/prettify.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>

    <script src="~/Scripts/bt.js"></script>

Js file:-

$('.collapse').on('shown.bs.collapse', function () {
    $(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function () {
    $(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
$(function () {
    var $callback = $("#callback");
    var optionsAsString = "";
    $('#btn1').click(function (e) {
        e.preventDefault();
        optionsAsString += "<option value='" + $('#txt1').val() + "'>" + $('#txt1').val() + "</option>";
        alert(optionsAsString);
    });
    $("select").append(optionsAsString);
    $("select").multiselect({

        click: function (event, ui) {
            $("#callback").text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked'));
        },
        beforeopen: function () {
            $("#callback").text("Select about to be opened...");
        },
        open: function () {
            $("#callback").text("Select opened!");
        },
        beforeclose: function () {
            $("#callback").text("Select about to be closed...");
        },
        close: function () {
            $("#callback").text("Select closed!");
        },
        checkAll: function () {
            $("#callback").text("Check all clicked!");
        },
        uncheckAll: function () {
            $("#callback").text("Uncheck all clicked!");
        },
        optgrouptoggle: function (event, ui) {
            var values = $.map(ui.inputs, function (checkbox) {
                return checkbox.value;
            }).join(", ");

            $("#callback").html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
        }
    });
    $('#a1').fancybox({
        transitionIn: "elastic",
        transitionOut: "elastic",
        overlayShow: false,
        target: this,
        orig: $("img", this),
        titlePosition: "inside",
        titleFormat: titleFormat,
        type: 'iframe',
        padding: 0,
        closeClick: false,

    });
    var titleFormat = function (titleStr, currentArray, currentIndex, currentOpts) {
        titleStr = '<span id="fancybox-title-' + currentOpts.titlePosition + '">' + titleStr + '<\/span>';
        return titleStr;
    };

});

Answer 1

you can add options like this:https://jsfiddle.net/kodedsoft/ufoeky49/1/

var values =0;  // or any value grabbed from inputs
$(".btn").on("click",function(){
   $('select').append($('<option>', {
     value: values,
     text: values
   }));

});

in your case

var getTxtVal = $('#txt1').val();  // or any value grabbed from inputs
$(".btn").on("click",function(){
   $('select').append($('<option>', {
     value: getTxtVal,
     text: getTxtVal
   }));

});

it should look like this :

$(function () {
var $callback = $("#callback");
var optionsAsString = "";
$('#btn1').click(function (e) {
    e.preventDefault();
    var $val = $('#txt1').val() ;
    $('select').append($('<option>', {
      value: $val,
      text: $val
      }));
});

$("select").multiselect({

    click: function (event, ui) {
        $("#callback").text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked'));
    },
    beforeopen: function () {
        $("#callback").text("Select about to be opened...");
    },
    open: function () {
        $("#callback").text("Select opened!");
    },
    beforeclose: function () {
        $("#callback").text("Select about to be closed...");
    },
    close: function () {
        $("#callback").text("Select closed!");
    },
    checkAll: function () {
        $("#callback").text("Check all clicked!");
    },
    uncheckAll: function () {
        $("#callback").text("Uncheck all clicked!");
    },
    optgrouptoggle: function (event, ui) {
        var values = $.map(ui.inputs, function (checkbox) {
            return checkbox.value;
        }).join(", ");

        $("#callback").html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
    }
});
$('#a1').fancybox({
    transitionIn: "elastic",
    transitionOut: "elastic",
    overlayShow: false,
    target: this,
    orig: $("img", this),
    titlePosition: "inside",
    titleFormat: titleFormat,
    type: 'iframe',
    padding: 0,
    closeClick: false,

});
var titleFormat = function (titleStr, currentArray, currentIndex, currentOpts) {
    titleStr = '<span id="fancybox-title-' + currentOpts.titlePosition + '">' + titleStr + '<\/span>';
    return titleStr;
};

});