Develop Reference

Replace div based on selected dropdown using Jquery

I want to replace the languages in my div when I select a country.. Here's what I got so far but is not working
My fiddle is in the comment, i cant seem to past it here

Two changes you need to do 1. value should be 1,2,3
<ul class="country-list" id="country-list" onchange="getval(this);">
<li value="1" class="Germany">Germany</li>
<li value="2" class="Singapore">Singapore</li>
<li value="3" class="Philippines">Philippines</li>
</ul>
and
$(".country-list li").click(function() {
$('#country-dropdown').text($(this).text());
$('#country-dropdown').click();
console.log(('.d'+$(this).val()));
$('.lang').hide();
$('.d'+$(this).val()).show();
});

Angular ngFor radio buttons

I've got a few questions like 'what is something' and 4 radio buttons as answers. So it`s like 3 generated <ul>s in DOM. But the problem is, when I click some radio button, it selects the radio button in another question. How to fix this problem? Is it something with the value? Or it needs to have some unique index?
Code:
<ul *ngFor="let test of tests"> {{test.question.title}}
<li *ngFor="let answer of test.question.answers"> <input type="radio" [value]="answer" [(ngModel)]="radioSelected"> <label for="">{{answer}}</label> </li>
</ul>
<button (click)="check(radioSelected)">Send</button>

add name attribute base of index and create an answer object in the component
component
answers = {}; // 👈
template (view)
<ul *ngFor="let test of tests;let index = index"> {{test.question.title}}
<li *ngFor="let answer of test.question.answers">
<label >
<input [name]="index" type="radio" [value]="answer" [(ngModel)]="answers[index]">
{{answer}}</label>
</li>
</ul>
<button (click)="check(answers)">Send</button>
stackblitz demo 🚀🚀

You should have different ngModel for every test in ngFor, change your ngModel to
<input type="radio" [value]="answer" [(ngModel)]="test.question.radioSelected">

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

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.

Getting access to various elements using jQuery

I'm currently working on something to check a box and change the text next to it to a hyperlink once ticked
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<span>myLink</span>
</li>
<li class="myList">
<input class="myCheckBox" type="checkbox" name="frank" value="someVal"/>
<span style="dispaly:none;">
<a class="navigation">mylink</a>
</span>
<spanmyLink></span>
</li> .. and so on
Hopefully from this you can gather i have 2 items, and i want one visible as default until checkbox is ticked and the hyperlink span tag takes over from the default span tag. That changes to style="display:none" other becomes style="display:block"
Now for the jQuery
$(window).load(function(){
$('.myCheckBox').click(function(){
//DO DOMETHING
});
});
But once I make the click event occur how to i gain access to these spans and such in order to change the styles of the various elements etc.
Thanks

You would go from this, which is the current element then use any of the tree traversal functions to move around the DOM, for example:
$(window).load(function(){
$('.myCheckBox').change(function() {
$(this).next("span").toggle(this.checked);
});
});
In the above we're using .toggle(bool) to do the hiding/showing, this allows us to hide/show the <span> depending on whether the checkbox we care about is checked.