Develop Reference

Popup Modal appear behind DIV

I'm integrating Bing Custom Search Engine to the website. The search result will appear in popup. Below is the integration code. When i add the code directly into the html the popup modal appear behind the div, then i add the below script inorder to bring the popup modal front and its works absolutely fine.
But when i add the code dynamically, mean the Bing integration code will be added by onclick and the popup appear behind the div as below pic. But this code $(".bcs-modal").appendTo("body"); nolonger working. I have tried almost everything none of them working.
Any suggestion..?
<script type="text/javascript">
jQuery(document).ready(function($){
$(".bcs-modal").appendTo("body");
});
</script>
Bing Integration Code
<script type="text/javascript" id="bcs_js_snippet" class="testclass" src="https://ui.customsearch.ai/api/ux/rendering-js?customConfig=bb24718a-xxxxx&market=en-US&version=latest&q="></script>
Onclick Function
var divtest = document.createElement("div");
divtest.setAttribute("class", "removeclass");
divtest.innerHTML = '<form class="librarysearchform-form" action="/" onSubmit="return false;" method="post" id="librarysearchform-form-bsc" accept-charset="UTF-8"> <div><div class="form-item form-type-textfield form-item-keywords"> <script type="text/javascript" id="bcs_js_snippet" class="testclass" src="https://ui.customsearch.ai/api/ux/rendering-js?customConfig=xxx-96535beb4319&market=en-US&version=latest&q="><\/script></div></div><div id="edit-options" class="form-item form-type-item"> <ul class="menu"> <li class="first leaf"><a title="Clicik here to Search in INCEIF Knowledge Portal and hit Enter"> <input id="ebshost-bsc" value="ebshost" type="checkbox" class="checkbox" checked> KMC Portal</a></li> <li class="leaf"><a title="Database Search by title or category">Databases</a></li> <li class="leaf"><a title="Journal Search by title or ISSN">Journals</a></li> <li class="leaf"><a title="Course resources lists">Course resources</a></li> <li class="leaf"><a title="Digital collections">Digital collections</a></li> <li class="last leaf"><a title="Exhibitions program">and more</a></li> </ul> </div> </div></form>';

Value Selected in Select Menu Not Being Sent To the Server

(Backend developer trying to do some front end development here)
I have a simple HTML form with some text field inputs and a select menu. When the form is submitted I see the text field values hitting the web server but I don't see the value for the select menu hitting the server. The code for the select menu is:
<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
<i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
<div class="mdc-select__anchor role-width-class">
<i class="mdc-select__dropdown-icon"></i>
<div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label id="roles-select-label" class="mdc-floating-label">Role</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface role">
<ul class="mdc-list">
<li class="mdc-list-item" data-value="0">
Painter
</li>
<li class="mdc-list-item" data-value="1">
Electrician
</li>
<li class="mdc-list-item" data-value="2">
Decorator
</li>
</ul>
</div>
</div>
The select menu is a material design component as described here.
The Javascript I have associated to this component is:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});
A couple of questions I have straight off the bat:
Should I be using <li> instead of <option> - the code above follows the examples shown on the website.
Should there be a name attribute?

Create a hidden input:
<input type="hidden" name="my_select" id="my_select" value="">
Then store the value there:
mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));
const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));
role.listen('change', () => {
document.getElementById('my_select').value = role.value;
});

There is a new update to this in material documentation in additional information section. It suggests doing the same thing that the accepted answer says but with no JavaScript.
Just wanted to put this out there for new people referring to this.
Select with hidden input (for HTML forms)
For convenient submission of Select's value in HTML forms, a hidden input
element may be added under the root element. The component will synchronize
its value with that of the hidden input.
<div class="mdc-select mdc-select--filled demo-width-class">
<div class="mdc-select__anchor">
<!-- Rest of component omitted for brevity -->
</div>
</div>

Display subcategories in HTML select box

I have the following categories displayed in a select box:
<form>
<select class="favoritefood">
<optgroup label="Dairy products">
<option>Cheese</option>
<option>Egg</option>
</optgroup>
<optgroup label="Vegetables">
<option>Cabbage</option>
<option>Lettuce</option>
<option>Beans</option>
<option>Onions</option>
<option>Courgettes</option>
</optgroup>
</select>
</form>
Is there any way to go another level down, ie, a subcategory? I've tried using optgroup inside optgroup but it doesn't work.

Or just put one or more spaces - &nbsp - before your text in the option.

You should create a custom dropdown for this purpose. Here are the steps:
Hide the original dropdown with CSS (display:none;) OR create a hidden field that will contain the value selected by the user
<input type="hidden" name="selection" id="selection">
Create a unordered list (ul) with as many nested li and sub ul
<ul class="custom-drop">
<li class="option-group">
<ul>
<li class="heading">Vegetables</li>
<li>Cabbage</li>
</ul>
</li>
<li class="option-group">
<ul>
<li class="heading">Dairy products</li>
<li>Cheese</li>
</ul>
</li>
</ul>
Style this newly created ul as per your needs
Listen for the click event on li inside this ul and set the appropriate option inside the hidden dropdown OR set the value of hidden field so that it can be sent with the form.
So if you are using jQuery then do something like this:
$('body').on('click', '.custom-drop li', function() {
$('#selection').val($(this).text());
// Probably you want to handle showing/hiding the custom drop here
});

You cant go any deeper. It is not allowed for the optgroup.
Read this: http://www.w3.org/TR/html401/interact/forms.html#h-17.6

AngularJS toggle ng-repeat visibility with checkbox

So I have a list of notices in AngularJS which I create with ng-repeat. The notices have a visibility status which determines whether the notice is shown in the list. Every notice has controls which allow that notice to be hidden, a simple button that changes the notice.status.visibility to false.
I also have a checkbox input that is supposed to show hidden notices. However, I am unsure on how to implement this and how would it work.
Here's the HTML:
<ul>
<input type="checkbox" value="Show Hidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>

Maybe with something like this:
<ul>
<input type="checkbox" value="Show Hidden" ng-model="showHidden" />
<li ng-repeat="notice on notices | filter: filter.search">
<div ng-show="showHidden || notice.status.visibility">
<!-- notice details -->
</div>
</li>
</ul>

How can I dynamically generate a multi-level dropdown menu with angular?

I have made a dropdown menu with multiple checkboxes using bootstrap (see http://jsfiddle.net/rxdazn/ryzJb/3/ ). This dropdown menu will introduce the possibility to plot multiple graphs ("measures") on the same chart + multiple options (log scale etc.).
A list of values (corresponding to "measures") will be stored in a json object.
For now, I am just using a single select (users can only plot 1 chart, there are no graph type nor options):
<select ng-model="measure" ng-options="facet.path as facet.name for facet in station.facet_groups[0].facets"></select>
How can I best handle the fact that each measure type will have the same submenu?
Should I change my HTML? Should I dynamically generate values for <input> id attributes ?
<!-- graph type -->
<li class="dropdown-submenu"> Graph type
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="line" name="graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="dot" name="graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>

Since an id must be unique on a page, you definitely should dynamically generate them; plus, you might also want to generate the name attribute in input element, but this is totally up to your use case. Based on you fiddle, I think you can generate your menu like this:
<ul id="menu">
<li class="dropdown-submenu" ng-repeat="facet in facets"> {{facet.name}}
<ul class="dropdown-menu">
<li>
<input type="checkbox" id="{{facet.name}}-line" name="{{facet.name}}-graph" value="line">
<label for="line">line</label>
</li>
<li>
<input type="checkbox" id="{{facet.name}}-dot" name="{{facet.name}}-graph" value="dot">
<label for="dot">dot</label>
</li>
</ul>
</li>
</ul>
I try to generate the id and name based on facet.name, you may want to change it to suit you needs.