Auto-select in Materialize Multi-Select drop-down - javascript

I have a multi-select field in materialize:
<select multiple>
<option value="somevalue" class="{{#if $eq isActive}}active{{/if}}">Some Value</option>
</select>
and want to auto select any values returned from the database when the user goes into edit mode.
In looking at the section in chrome dev tools I see it creates an li with a checkbox and the li has class="active" when it's checked.
I've tried setting that class programmatically in javascript, but still the selections aren't checked.
Is there something special I need to do to get those options to check "automatically" for edit modes?
I'm using Meteor and Blaze to create this layout, so keep that in mind.

The below approach should work,
<select multiple>
{{#if $eq isActive}}
<option value="somevalue" selected="selected">Some Value</option>
{{else}}
<option value="somevalue">Some Value</option>
{{/if}}
</select>
Also, make sure that the helper that determines whether the item is active or not to return the correct value.

Related

Something wrong in BINDING in Angular

I have two select. If you chose an item in the first, automatically the second one fills with the subarray. It works. But I want to add new field, same field but isolated. Now, if I add new fields, the others selection change. I want to prevent this. How can I do? Thank you! CODE
<div data-ng-repeat="food in foods track by $index">
<select ng-model="select1" ng-options="a.id as a.nome for a in list.products" ng-change="selectLot(select1)">
<option value="">-- Select Product --</option>
</select>
<select ng-model="select2" ng-options="a.id as a.value for a in Subarray" ng-if="Subarray" ng-change="lotSelect(select2)">
<option value="">-- Select Lot --</option>
</select>
</div>
<button ng-click="newLine();">Add Line</button>
<button ng-click="removeLine();" class="{{$index}}">Remove</button>
<h1>INFO ABOUT SELECTION</h1>
{{allInfo}}
P.S. also {{allInfo}} doesn't work and I don't know why... (it should contains the info, like HERE
Your code should look like this:
as you can see, I send the selectedProduct to the second selection.
<select ng-model="selectedProduct" ng-options="a as a.nome for a in list.products">
<select ng-model="selectedLot" ng-options="a as a.id for a in selectedProduct.lots" ng-if="selectedProduct.lots">
You won't need to change anything in the controller.

bootstrap-select not selecting the correct item

I am using bootstrap select Bootstrap-select v1.7.2 in Angular. When I select some option from drop down it selects some other option.
Plunker is setup here:
http://plnkr.co/edit/MRYOkW?p=preview
(code is in dashboard.html and dashboard.js)
That's how I am creating it. bootstrap-dropdown is the directive that initiates the drop-down.
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" bootstrap-dropdown >
<option>Contains</option>
<option>Greater Than</option>
<option>Less Than</option>
<option>Equal To</option>
</select>
You missed to add value attribute on your options that would set value of ng-model on select of any option
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" bootstrap-dropdown>
<option value="">Contains</option>
<option value="Greater">Greater Than</option>
<option value="Less">Less Than</option>
<option value="Equal">Equal To</option>
</select>
Update
If you want to render select option dynamically I'd refer you to use ng-options which support select perfectly. You can select object on selection of option
Demo here
problem is you can't add option value property . either set value property or generate this using ng-repeat option
Above answer must be the right answer but, It seems like you had an unwanted empty option an it was messing the index. By adding a real one it started to work.
<select ng-model="vm.CurrCustomer.Logic" name="ddlLogic" bootstrap-dropdown >
<option></option>
<option>Contains</option>
<option>Greater Than</option>
<option>Less Than</option>
<option>Equal To</option>
</select>

jQuery Mobile Multi-Select from asynchronous data

I have a little problem with jQuery Mobile and AngularJS.
I want a multi-select so the user can chose a category. Categories have parents and childs. The whole structure comes from a database so its an asynchronous call to get the data.
The problem is that the select element has the data but doesn't show it unless you click on the first empty option.
Maybe i'll better show than tell
http://plnkr.co/edit/7UwGjSRfGEnhIvSrtGjV
<div ng-show="catsready" id="jqselect">
<label for="multiselect" class="select">Multi-select:</label>
<select id="multiselect" multiple="multiple" data-native-menu="false" data-icon="bars" data-iconpos="left">
<option>Choose a few options:</option>
<optgroup ng-repeat="parent in cats" label="{{parent.name}}">
<option ng-repeat="child in parent.childs" value="" jq-select>{{child.name}}</option>
</optgroup>
</select>
</div>
After angular has added/changed the optiongroups and options, you need to tell jQM to refresh the selectmenu widget:
$("#multiselect").selectmenu("refresh", true);
API Doc: http://api.jquerymobile.com/selectmenu/#method-refresh

multiselect dropdown sorts based on value present in option tag

I am having a multiselect dropdown whose value are populated based on iteration through for each. However the order I am sending the data is not maintained.
Please suggest what should I do.
<select id="secWhse" path="secondaryWarehouse" multiple="true" style="display: none;"
title="Select the secondary warehouse to which you want to give access to the user.">
<option value="1">Enterprise</option>
<option value="14">enter2</option>
<option value="17">enter3</option>
<option value="19">4thenterprise</option>
</select>
But if I am able to print the value directly, Its printing in my order.
UPDATE: Plugin we are using is: http://wenzhixin.net.cn/p/multiple-select/docs/#multiple-select
CODE:
$('#secWhse').multipleSelect({ filter: true,multiple: true});
JSP code to populate select tag:
${item.value}

How do I determine if different sections of a checkbox dropdown menu are selected?

I have a multiselect dropdown menu where each option has a checkbox and more than one option can be selected at once. I'm using a jQuery multiSelect plugin generate the dropdown.
<select id="types" multiple="multiple" size="5">
<option value="">Show All</option>
#{
<option value="Gains">Gains</option>
<option value="Losses">Losses</option>
<option value="Adjustments">Adjustments</option>
<option value="Future">Future</option>
<option value="Deliveries">Deliveries</option>
<option value="Recoveries">Recoveries</option>
<option value="Full Payout">Full Payout</option>
<option value="Early Payout">Early Payout</option>
<option value="Charge Offs">Charge Offs</option>
<option value="Returns">Returns</option>
<option value="Transfers">Transfers</option>
<option value="Ins. Write-offs">Ins. Write-offs</option>
}
</select>
What I need to be able to do is separate the options into 2 sections. The first 4 in a section and the last 8 in a section. If an option is selected in one section, then any options that are selected in the other section are then unselected. This is already setup in a C# .NET application. I am having to replicate the functionality. I don't have access to the .NET code. At first I thought maybe I could put the different options into separate divs and just check whether an option was selected in each div but I get validation errors when I try to do that. I'm not really sure what else I could try. Any help with this would be great. Thanks.
try using classes, attach a jquery check box click(), check for class if ( $(this).hasClass("checkboxSection1") ) then uncheck all the other ones like so $(".checkboxSection2").prop('checked', false);
so some simple code is
$("myForm :checkbox").click( function(){
$(this).hasClass("checkboxSection1")?
$(".checkboxSection2").prop('checked', false):
$(".checkboxSection1").prop('checked', false);
});
How about giving them a set of classes e.g. 'option1' & 'option2', then you can do a little javascript/jquery to handle the logic of the selection process...

Categories

Resources