I need to set the status select box to the value of customer.lStatus. However,
the select box does not get updated with a value, unless I manually write the
HTML beforehand. Wha?
Script
<script>
// ...
data () {
return {
customer: {
dLastUpdate: '2016-02-17 15:07:06',
lKey: '1007',
lLastUpdateBy: '1000',
lStatus: '100015',
sName: 'TestAgain'
},
statuses: [
[100013, 'Active'],
[100015, 'Deactivated'],
[100012, 'On Hold'],
[100014, 'On Notice'],
[100011, 'Pending']
]
};
},
// ...
</script>
Does not work
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" value="status[0]">{{status[1]}}</option>
</select>
Works
<select class="form-control" v-model="customer.lStatus">
<option value="100013">Active</option>
<option value="100015">Deactivated</option>
<option value="100012">On Hold</option>
<option value="100014">On Notice</option>
<option value="100011">Pending</option>
</select>
You are missing a colon in the value attribute.
Try:
<select class="form-control" v-model="customer.lStatus">
<option v-for="status in statuses" :value="status[0]">{{status[1]}}</option>
</select>
Related
I have 2 selects drop downs like these
This is the code:
this is to create the drop down with numbers using jquery
$(function(){
var $select = $(".1-100");
for (i=1;i<=100;i++){
$select.append($('<option></option>').val(i).html(i))
}
});
this is the html
<select id="subject" name="subject">
<option value="">Choose Subject</option>
<option value="Mathematics">Mathematics</option>
<option value="English">English</option>
<option value="Geography">Geography</option>
<option value="Mathematics Literacy">Mathematics Literacy</option>
<option value="Physical Science">Physical Science</option>
<option value="Cat">Cat</option>
<option value="Life Sciences">Life Sciences</option>
<option value="Accounting">Accounting</option>
<option value="History">History</option>
<option value="Life Orientation">Life Orientation</option>
I am trying to save the value pairs like or just in a normal javascript array
student: {
subject: {
value: 'Mathematics',
key: '75',
},
subject: {
value: 'English',
key: '88',
},
}
I have input element as range for years. I can change value of year by buttons. I would like to create nested list in second select that depends on year from range input and on first select - id countrySelect.
<input type="range" id="yearRange" min="0" max="3" list="yearsDatalist" value="3"
onChange="changeYear(value)" onInput="changeYearLite(value)">
<datalist id="yearsDatalist">
<option value="0" label="1918"></option>
<option value="1" label="1936"></option>
<option value="2" label="1950"></option>
<option value="3" label="1981"></option>
</datalist>
Then I have two select elements. The first one is static - not necessary to change the values there:
<select id="countrySelect">
<option value="0">Sweden</option>
<option value="1">Germany</option>
<option value="2">USA</option>
</select>
Second select is dependent on year and on values in first select with id=countrySelect
<select id="itemSelection"></select>
I used object for values like this in some different project:
const yearsFilterDataList = {
"1918": {
"0": "Choose model",
"volvo": "Volvo",
"mercedes": "Mercedes",
"saab": "Saab"
}, ...
here's something similar I made a few years back, check it out.
Im trying to get the item properties that is being clicked in the option button
This is my code
<select #click="populate" class="form-control" tabindex="12">
<option disabled value="" selected="selected">Select one</option>
<option v-for="(payment, index) in paymentsSelect" #click="pop(payment)"
:key="index"
:value="payment.id">{{ payment.name }}
</option>
</select>
this is my data
selectedPayment: '',
paymentsSelect: [],
these are my methods
pop(payment){
console.log(payment)
},
populate(){
var self = this
this.$http.get(this.$backendUrl + 'subjects/payment_method')
.then(function(response) {
self.paymentsSelect = response.data.data
})
.catch(function() {})
},
No need to add event, just bind the select input to a data property using v-model like :
<select v-model="selectedPayment" class="form-control" tabindex="12">
<option disabled value="" selected="selected">Select one</option>
<option
v-for="(payment, index) in paymentsSelect"
:key="index"
:value="payment">
{{ payment.name }}
</option>
</select>
selectedPayment changes when you select an option then use it in your script like this.selectedPayment
I want to set whatever I choose i want to save it to viewmodel but I can't figure out how to set option that I selected to ng-model. If nothing is selected value will be select one. Available options are YES (true) / NO (false). Thanks guys
<select automationid="APR" name="cost"
class="ddl"
ng-model="tempDefaultCost.cost"
ng-options="item.value as item.text for item in costFlyoutCtrl.trueFalseLookup">
<option value="">Select One</option>
</select>
If I understood your question correctly, You can add an extra option to select box which is disabled and selected:
with ng-repeat:
<select automationid="APR" name="cost" class="ddl" ng-model="$ctrl.selectedItem">
<option value="" disabled selected>Select one</option>
<option ng-repeat="x in $ctrl.items">{{x.label}}</option>
</select>
and also with ng-options:
<select automationid="APR" name="cost"
class="ddl"
ng-model="$ctrl.selectedItem"
ng-options="x.label for x in $ctrl.items">
<option value="" disabled selected>Select one</option>
</select>
And in your controller:
this.items = [{value: true, label: 'TRUE'}, {value: false, label: 'FALSE'}];
this.selectedItem;
DEMO
In my React app I have a select box with different options. Two of these options has the same value to post to the server:
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature</option>
<option value="humidity">Humidity</option>
<option value="temperature">Water temperature</option>
<option value="smoke">Smoke</option>
</select>
</div>
Problem 1: when I select a "Water temperature" option, I get a "Temperature" in an option field
Problem 2: how to make handleCategorySelect function working correctly? I mean, how to select "Water temperature" option with the same value as "Temperature" option and send it to the server?
handleCategorySelect:
handleCategorySelect = e => {
this.setState({ category: e.target.value })
}
Problem 3: I want to disable "Frequency" form field when user select a "Water temperature" option in Category, how to do that? Any "if" statement inside or something?
<div className="form-group">
<label>Category</label>
<select className="form-control" onChange={this.handleCategorySelect} value={this.state.category}>
<option></option>
<option value="temperature">Temperature</option>
<option value="humidity">Humidity</option>
<option value="temperature">Water temperature</option>
<option value="smoke">Smoke</option>
</select>
</div>
<div className="form-group">
<label>Frequency</label>
<select className="form-control" onChange={this.handleFrequency} value={this.state.frequency}>
<option></option>
<option value="seconds">Seconds</option>
<option value="minutes">Minutes</option>
<option value="hours">Hours</option>
<option value="days">Days</option>
</select>
</div>
Both Temperature and Water Temperature has the same value "temperature"
<option value="temperature">Temperature</option>
<option value="temperature">Water temperature</option>
Change the Water Temperature value to something else
<option value="waterTemperature">Water temperature</option>
I have this select element in a row (of which there can be a few) which represents an item. But the scope for manufacturer does not update when this is selected. The default for the item's manufacturer attribute is null (since when it's created - it no manufacturer has been selected yet)
<select ng-model="manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
I guess my question is - how do I get the manufacturer attribute in the item to update with the select box?
Thanks!
If it helps - here's the scope of the cams item:
$scope.cams = [
{channels:1, manufacturer:null},
{channels:1, manufacturer:null}
];
Turns out ng-model="manufacturer" should have been ng-model="cam.manufacturer":
<select ng-model="cam.manufacturer" ng-options="manufacturers.name for manufacturers in manufacturers" ng-change="change()" class="ng-valid ng-dirty">
<option value="" selected="selected" class=""> --Select a Manufacturer--</option>
<option value="0">Choice1</option>
<option value="1">Choice2</option>
<option value="2">Choice3</option>
</select>
Now it works perfectly.
You could use this:
HTML
<selectmultiple ng-model="selectedValues">
<option ng-repeat="lang inLanguages" value="{{lang.name}}" ng-click="selected(selectedValues)">{{lang.name}}</option>
</select>
angularjs:
$scope.selected = function(nowSelected){
$scope.selectedValues = [];
if( ! nowSelected ){
return;
}
angular.forEach(nowSelected, function(val){
$scope.selectedValues.push(val);
});
};