VueJS Select Box Not Reacting When Dynamically Populated - javascript

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

How can you save 2 HTML SELECT Drop-Down Inputs as Pairs using Javascript?

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.

Onclick button isnt working in vue.js in option tag

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

AngularJS - Set the true or false or select one option

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

How to post the same value from other options to the server

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>

AngularJS <select> not saving value in object?

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);
});
};

Categories