We Keep Coding

Backend Handlebars select tag

I am building an advanced searching operator for my app. I am trying to get the parameters of the search to persist through the search. My problem is that I have <select> tags so I can't just pass the value through.
<select name="sort" value="{{inputs.sort}}">
<option value="None" >None</option>
<option value="NAME">Alphabetical</option>
<option value="RATING">Rating</option>
<option value="RELEVANCE">Relevance</option>
</select>
the value attr doesn't work with the select tag. The only way I've found to do this is by putting the selected attr inside of the option tags <option selected="selected">...<option>, but there is no simple way to do this with handlebars.
helpers don't work because I am only using backend handlebars which doesn't allow ternaries. Apart from completely generating the HTML from the backend I can't find a way to do this but I feel like there has to be a "clean" or "dry" solution.

Custom Pipe Filter For Array Of Json Objects In Angular 4

I have an array, that consists a list of json objects as items. I am using this array as an options list for two select controls, here I want to hide first select control selected items in second select control options list.
Is it possible to do?

I don't know why are you looking for a pipe/filter solution when it can be done so easily without pipe? I may not be knowing entire scenario of yours but what you have written according to that a simple solution would be,
<select class="form-control" [(ngModel)]="selectedCity">
<option *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
// look at [disabled]="selectedCity==ct.id"
<select class="form-control" [(ngModel)]="selectedOtherCity">
<option [disabled]="selectedCity==ct.id" *ngFor="let ct of cities" [value]="ct.id">{{ct.name}}
</select>
detailed code could be found here : https://plnkr.co/edit/gkvFqtyddLVEsFOE07Ls?p=preview

jQuery - Get all items in a multiple select list

I'm a jQuery noob and I haven't been able to find what I want in the documentation, perhaps because I do not know what to search for. I need to get ALL values of a dropdown list.
I am currently doing:
<select id="cars" multiple="multiple" class="form-control">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
And to access that, my Javascript is:
"cars" : $('#cars').val()
Unfortunately, this only returns a list of SELECTED items. Is there a simple way to return the entire list?
Thanks,
Tim

If you want to do something like get all the values and put them in an array, you could do:
$("#cars option").map(function(){ return this.value }).get()

$('#cars option') would return all the <option> elements.

selector
$('#cars option')
will give you list of options.

You can get the children of the div id cars by using .children(), or simply $(#cars option):
var ary = [];
$('#cars').children().each(function () {
ary.push($(this).val()); //put them in array
});
And you can access the children with $(this).val(), and store them in an array

Handlerbars template for handling forms

Currently I create a Handlebars template for each form and use value={{user}} in them. So I can fill any form easily for updating any entity. But select, radio and ckeckboxs are different. Is there any clean way to populate these elements too. They do not have value attributes.

<select id='select'>
<option selected value=user name=test>test</option>
</select>
as you can see, you can control the value of select by set "selected" attribute to specific options.
Or you can try embed some javascript code like
document.getElementById('select').value={{user}}
You need to make sure you have options with correct value attributes set

You can achieve this by making use of the each helper.
<select>
{{#each options}}
<option>{{this}}</option>
{{/each}}
</select>
Where options is a plain array (["apple", "banana", "pear"]).
You can find more info on the homepage. There's also an example where your array contains object, which could be useful should you need to specify value attributes.

On stackoverflow, I found this reply :
How to set selected select option in Handlebars template
With a very good solution (from #janjarfalk edited by #BlaM) :
With this partial (using Jquery) ...
window.Handlebars.registerHelper('select', function( value, options ){
var $el = $('<select />').html( options.fn(this) );
$el.find('[value="' + value + '"]').attr({'selected':'selected'});
return $el.html();
});
You can wrap selects in your Handlebars template with {{#select status}}...
<select>
{{#select status}}
<option value="Completed">Completed</option>
<option value="OverDue">OverDue</option>
<option value="SentToPayer">SentToPayer</option>
<option value="None">None</option>
{{/select}}
</select>

How to select an item in multi group listbox using jquery

I can select items in listbox using the following jquery
$('#id option[value=<?php echo $row; ?>]').attr('selected','selected');
But it is not working for optgroup, Any idea how to do this?

Try this,
$('#id option[value="<?php echo $row; ?>"]').attr('selected','selected');
You have to use quotes to write php strings.
This may help you.

Using php to construct javascript is not a wise practice because you can't utilize browser caching and it becomes more difficult to reuse the code. Also, optgroup is not for selecting, the purpose of the tag is to simply group options within a select. If you're trying to detect which optgroup contains the user selected option, you have to use a different approach. Please provide the markup representing the whole select and also specify what you are trying to achieve.

http://jsfiddle.net/ZGLAj/
<select multiple=true>
<optgroup value="coucou" >
<option value="1">1</option>
<option value="2">2</option>
</optgroup>
<optgroup value="ciao" >
<option value="3">3</option>
<option value="4">4</option>
</optgroup>
</select>
$(' optgroup[value=coucou]').children().attr('selected','selected');