Here is the dropdown HTML
<div class="form-group">
<select class="form-control" id="edit-item_condition">
<option data-tokens="1">Option 1</option>
<option data-tokens="2">Option 2</option>
<option data-tokens="3">Option 3</option>
<option data-tokens="4">Option 4</option>
<option data-tokens="5">Option 5</option>
</select>
</div>
I'm trying to set default value that I fetch from DB
const editItem = new Vue({
el: "#editItem",
data: {
items: null,
selectedItem: null,
},
methods: {
set_dropdown_default(item) {
try {
this.selectedItem = item;
$('.edit-item_condition').selectpicker('val', parseInt(this.selectedItem.properties.condition));
}
catch (err) {
console.log(err);
}
},
The this.selectedItem.properties.condition in my example is "2". Checked and proved in debugger. Nevertheless, the dropdown is not affected and shows "Option 1".
You can bind the select tag via v-model with the needed option value, here is an example:
new Vue({
el:"#app",
data:{
selected: 4
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.min.js"></script>
<div id="app">
<select v-model="selected">
<option value="1">Frist</option>
<option value="2">Second</option>
<option value="3">Third</option>
<option value="4">Fourth</option>
</select>
<p>Selected item: {{selected}}</p>
</div>
so in your example you could do
<select class="form-control" id="edit-item_condition" v-model="selectedItem.properties.condition">
Reference
Related
I have a combobox and want to do something different based on the selected combobox. I use a separate vue.html and TypeScript file.
Here's my code:
<select name="LeaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
Here's my TypeScript file:
onChange(value) {
console.log(value);
}
How do I get the selected option value in my TypeScript function?
Use v-model to bind the value of selected option's value. Here is an example.
<select name="LeaveType" #change="onChange($event)" class="form-control" v-model="key">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
data: {
key: ""
},
methods: {
onChange(event) {
console.log(event.target.value)
}
}
}
</script>
More reference can been seen from here.
# is a shortcut option for v-on. Use # only when you want to execute some Vue methods. As you are not executing Vue methods, instead you are calling javascript function, you need to use onchange attribute to call javascript function
<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
function onChange(value) {
console.log(value);
}
If you want to call Vue methods, do it like this-
<select name="LeaveType" #change="onChange($event)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
...
...
methods:{
onChange:function(event){
console.log(event.target.value);
}
}
})
You can use v-model data attribute on the select element to bind the value.
<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
data:{
selectedValue : 1, // First option will be selected by default
},
...
...
methods:{
onChange:function(event){
console.log(this.selectedValue);
}
}
})
Hope this Helps :-)
The changed value will be in event.target.value
const app = new Vue({
el: "#app",
data: function() {
return {
message: "Vue"
}
},
methods: {
onChange(event) {
console.log(event.target.value);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select name="LeaveType" #change="onChange" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</div>
You can also use v-model for the rescue
<template>
<select name="LeaveType" v-model="leaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</template>
<script>
export default {
data() {
return {
leaveType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
}
</script>
onChangeMethod --> method of your choice, it can be anything related to your program.
<template>
<select #change="onChangeMethod($event)">
<option value="test">Test</option>
<option value="test2">Test2</option>
</select>
</template>
<script>
data(){
return{
...
}
},
methods:{
onChangeMethod(event)
{
console.log(event.target.value);
}
},
created(){
...
}
</script>
You can save your #change="onChange()" an use watchers.
Vue computes and watches, it´s designed for that.
In case you only need the value and not other complex Event atributes.
Something like:
...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
In the following:
<select id="test">
<option value="1">Test One</option>
<option value="2">Test Two</option>
</select>
I want is, When i select the option, The value of selected option should appear in input box. Like when i click Test One, the input box should say 1 as selected
Is it possible to do this in Vue?
You have to used v-model to get the selected item from <select>
<select v-model="selected">
<option disabled value="">Please select one</option>
<option>A</option>
<option>B</option>
</select>
<span>Selected: {{ selected }}</span>
In Javascript
new Vue({
el: '...',
data: {
selected: ''
}
})
I hope you got what you want!
You can accomplish this by using the #change event handler
<select #change="handleChange">
<option
v-for="item in options"
:value="item.value"
v-text="item.letter"
/>
</select>
new Vue({
el: "#app",
data: {
selected: undefined,
options: [
{ letter: 'A', value: '1' },
{ letter: 'B', value: '2' },
]
},
methods: {
handleChange({ target: { value } }) {
this.selected = value
}
},
})
Check out this fiddle
I have a combobox and want to do something different based on the selected combobox. I use a separate vue.html and TypeScript file.
Here's my code:
<select name="LeaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
Here's my TypeScript file:
onChange(value) {
console.log(value);
}
How do I get the selected option value in my TypeScript function?
Use v-model to bind the value of selected option's value. Here is an example.
<select name="LeaveType" #change="onChange($event)" class="form-control" v-model="key">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
data: {
key: ""
},
methods: {
onChange(event) {
console.log(event.target.value)
}
}
}
</script>
More reference can been seen from here.
# is a shortcut option for v-on. Use # only when you want to execute some Vue methods. As you are not executing Vue methods, instead you are calling javascript function, you need to use onchange attribute to call javascript function
<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
function onChange(value) {
console.log(value);
}
If you want to call Vue methods, do it like this-
<select name="LeaveType" #change="onChange($event)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
...
...
methods:{
onChange:function(event){
console.log(event.target.value);
}
}
})
You can use v-model data attribute on the select element to bind the value.
<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
new Vue({
data:{
selectedValue : 1, // First option will be selected by default
},
...
...
methods:{
onChange:function(event){
console.log(this.selectedValue);
}
}
})
Hope this Helps :-)
The changed value will be in event.target.value
const app = new Vue({
el: "#app",
data: function() {
return {
message: "Vue"
}
},
methods: {
onChange(event) {
console.log(event.target.value);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.16/dist/vue.js"></script>
<div id="app">
<select name="LeaveType" #change="onChange" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</div>
You can also use v-model for the rescue
<template>
<select name="LeaveType" v-model="leaveType" #change="onChange()" class="form-control">
<option value="1">Annual Leave/ Off-Day</option>
<option value="2">On Demand Leave</option>
</select>
</template>
<script>
export default {
data() {
return {
leaveType: '',
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
}
</script>
onChangeMethod --> method of your choice, it can be anything related to your program.
<template>
<select #change="onChangeMethod($event)">
<option value="test">Test</option>
<option value="test2">Test2</option>
</select>
</template>
<script>
data(){
return{
...
}
},
methods:{
onChangeMethod(event)
{
console.log(event.target.value);
}
},
created(){
...
}
</script>
You can save your #change="onChange()" an use watchers.
Vue computes and watches, it´s designed for that.
In case you only need the value and not other complex Event atributes.
Something like:
...
watch: {
leaveType () {
this.whateverMethod(this.leaveType)
}
},
methods: {
onChange() {
console.log('The new value is: ', this.leaveType)
}
}
I am trying to update a <select> element when I select one or multiple values from another <select multiple> using jQuery. Here's my multiple select:
<select class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
I hope this is what you are looking for,
$('select#first').change(function() {
$("select#second option:not(:first-child)").remove();
$(this).find("option:selected").each(function() {
$("select#second").append($(this).clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="form-control" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select name="second" id="second">
<option value=''>Select 2</select>
</select>
Check this script https://jsfiddle.net/gpb5wx8h/5/
Jquery:
function chooseItems(item, placeholder){
$(item).change(function() {
var item = $(this);
console.log(typeof(item.val()));
if(typeof item.val() == 'object'){
$.each(item.val(), function(i,v){
var selectedItem = item.find('option[value="'+ v +'"]'),
selectedText = selectedItem.text();
selectedItem.detach();
$(placeholder).append('<option value="' + v +'">' + selectedText + '</option>')
})
}
})
}
$(document).ready(function() {
chooseItems('.choose-role','.placeholder-role');
chooseItems('.placeholder-role','.choose-role');
})
HTML:
<select class="form-control choose-role" multiple>
<option value="1">company 1</option>
<option value="2">company 2</option>
<option value="3">company 3</option>
<option value="4">company 4</option>
</select>
<select class="form-control placeholder-role" multiple>
</select>
If you want to update select options by fetching data from the server end regarding the selected values in multiple select box then you can perform ajax operation and insert the result to the another select box which is to be updated.
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>