I am having an issue with Semantic-UI searchable dropdown and Vuejs data binding, at the moment it is only able to model bind 1 changed option regardless of the selected dropdown option. below is my code.
I tried using the #change event but this has brought no results for me.
<select
name="clients"
id="clients"
class="ui fluid search selection dropdown uppercase"
v-model="selected_client"
>
<option value>Select Client</option>
<option
v-for="(client, index) in clients"
:key="index"
:value="client.services"
>{{client.firstname}}, {{client.lastname}}</option>
</select>
I realized my error, it was not on the #change event handler rather how I was handling the v-bind key as v-bind expect each key to be unique so in my case, I wasn't providing such so I passed the event to a method which filters out the specific client based on the id given as the value. below is the solution which worked for me.
I hope someone will find this useful.
<select
name="clients"
id="clients"
class="ui fluid search selection dropdown uppercase"
#change="clientData($event)"
>
<option value>Select Client</option>
<option
v-for="client in clients"
:key="client.id"
:value="client.id"
>{{client.firstname}}, {{client.lastname}}</option>
</select>
Related
I'm using vue-i18n to handle translations in my software. I'm trying to create a select input to change between languages. To do so, I'm using the following code:
<select class="form-control" v-model="$i18n.locale">
<option v-for="(key,value) in languages" v-bind:key="value" :value="value">
{{key}}
</option>
</select>
I want that my actual language ($i18n.locale) appears as selected in my select input. However, none of the languages is selected, as the following image shows. How can I solve this?
First argument in v-for is the value and second is the key.
Documentation.
So this should work:
<option v-for="(value, key) in languages" :key="key" :value="value">
You have an example in i18n's docs.
Or, since you want to use the values as keys (as they're unique & primitives):
<option v-for="lang in languages" :key="lang" :value="lang">
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.
I have a very simple scenario and I wanted to use AngularJS for that. I am not able to get this one right.
I am retrieving data from database and directly writing it into the view inside dropdown. From their based on which item is selected, I want to populate the value into textbook.
So my code for it is as follows:
<select>
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea></textarea>
I am trying to achieve following:
whatever option user select, the corresponding value for the item be populated into text area.
Please suggest how can I achieve using AngularJS.
You should use ngModel directive for that, the same for both select and textarea:
<select ng-model="selectModel">
<option selected="selected" disabled="disabled">dropdown</option>
#foreach (System.Data.DataRow row in ViewBag.Template.Rows)
{
<option value="#row[1].ToString()">#row[0].ToString()</option>
}
</select>
<textarea ng-model="selectModel"></textarea>
Demo: http://plnkr.co/edit/XOs6wUyqdr3ZlFtBq3RB?p=preview
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
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}