I'm trying to have any option within my select input to be set as a value in an object. I'm trying to use v-model for this purpose but I'm not exactly sure how. Below is what I've tried to do so far.
<div class="select-wrapper">
<select required name="category" id="category" #change="(e) => $emit('input', e.target.value)">
<option value="" selected="selected">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="other">Other</option>
</select>
</div>
Need a prop to bind the selected value and pass that prop to v-model. E.g.
<template>
<div>
<pre>category = {{ category }}</pre>
<select required name="category" id="category" v-model="category">
<option value="">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="nxp">NXP</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
category: null
};
}
};
</script>
Edit: plunker
You should add value prop to your component :
<div class="select-wrapper">
<select required name="category" id="category" #change="(e) => $emit('input', e.target.value)">
<option value="" selected="selected">Category*</option>
<option value="attendee">Attendee</option>
<option value="distributor">Distributor</option>
<option value="sponsor">Sponsor</option>
<option value="media/analyst">Media/Analyst</option>
<option value="university">University</option>
<option value="other">Other</option>
</select>
</div>
<script>
export default {
props:value
};
</script>
and use it in parent component like :
<my-select v-model="category"/>
...
<script>
export default {
data() {
return {
category: ''
};
}
};
</script>
Related
I have many filter button like below, how can I get the select value without using its id?
<select name="selectId" id="selectId" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="1" selected>1</option>
<option value="2" selected>2</option>
</select>
<select name="selectStore" id="selectStore" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="A" selected>Store A</option>
<option value="B" selected>Store B</option>
</select>
<select name="selectProduct" id="selectProduct" multiple
class="selectpicker required form-control" data-live-search="true">
<option value="All" selected>All</option>
<option value="apple" selected>Apple</option>
<option value="orange" selected>Orange</option>
</select>
Normally, I will use this code to find the changed select button:
$(document).ready(function() {
// Get filter function for chart
$('#selectId').change(function() {
var select = $("#selectId").val();
if (selectLength >= 1 && select.includes("All")) {
$('.selectpicker#selectId').selectpicker('deselectAll');
makeChart();
}
else {
makeChartFilter(select);
}
})
});
But the problem is when there are many filter buttons, I have to write many functions like above and just only change the id.
How can I just use something like this:
$(document).ready(function() {
// Get filter function for chart
$('#selectpicker').change(function() {
id_change = something;
var select = $("#id_change").val();
...
})
});
Using vanilla JavaScript and the eventTarget, this is relatively straight forward. Here is an example:
document.getElementById('container').onchange = ({ target }) => {
console.log(target.value);
};
<form id="container">
<select name="foo">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="bar">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</form>
In my vue-application I want to assign some values from an xls-file to some options in a select.
<tr v-for="header in fileHeaders" :key="header">
<td>{{header}}</td>
<td>
<select class="form-control" v-model="selectedField" v-on:change="setField">
<option selected>Choose option</option>
<option value="company_name">Company name</option>
<option value="address">Address</option>
<option value="zipcode">Zipcode</option>
<option value="city">City</option>
<option value="email">Email</option>
<option value="number">Phonenumber</option>
<option value="contact_person">Contact person</option>
<option value="cvr_number">ID</option>
</select>
</td>
</tr>
data() {
return {
fileHeaders: ['Company Name', 'Zipcode', 'City' etc.],
selectedField: "",
chosenFields: []
};
}
so for each {{header}} I want to assign a specific option from the select and then I want to push an array to the backend with the assigned values but I don't really know how to achieve that or where to start...
Any ideas?
just use chosenFields[] as v-model of select with index i of v-for. you will get selected values in chosenFields array
<tr v-for="(header,i) in fileHeaders" :key="header">
<td>{{header}}</td>
<td>
<select class="form-control" v-model="chosenFields[i]" v-on:change="setField">
<option selected>Choose option</option>
<option value="company_name">Company name</option>
<option value="address">Address</option>
<option value="zipcode">Zipcode</option>
<option value="city">City</option>
<option value="email">Email</option>
<option value="number">Phonenumber</option>
<option value="contact_person">Contact person</option>
<option value="cvr_number">ID</option>
</select>
</td>
</tr>
data() {
return {
fileHeaders: ['Company Name', 'Zipcode', 'City' etc.],
selectedField: "",
chosenFields: []
};
}
I can't get them to output both the selections at the same time. Is this possible? One side is always undefined. I have tried so many things, but when I console.log I just cannot get them to log at the same time. I would like the default values to be "all", and then either side would update depending on what is clicked.
function combo(a, b) {
a = a.value
b = b.value
console.log(a, b)
}
<label for="food">Please select a food: </label>
<select id="food" onchange="combo(this,'all')">
<option value="100">Select</option>
<option value="all">All</option>
<option value="cheese">cheese</option>
<option value="pickle" pickle</option>
</select>
<label for="sort">Please sort: </label>
<select id="sort" onchange="combo('all',this)">
<option value="100">Select</option>
<option value="smell">smell</option>
<option value="texture">texture</option>
</select>
Consider getting the values explicitly instead of trying to go through a onchange attribute handler.
const foodSelect = document.getElementById("food");
const sortSelect = document.getElementById("sort");
function selectHandler() {
const food = foodSelect.value;
const sort = sortSelect.value;
console.log(`Food: ${food} | Sort: ${sort}`);
}
foodSelect.addEventListener("change", selectHandler);
sortSelect.addEventListener("change", selectHandler);
<label for="food">Please select a food: </label>
<select id="food">
<option value="100">Select</option>
<option value="all">All</option>
<option value="cheese">cheese</option>
<option value="pickle" pickle</option>
</select>
<label for="sort">Please sort: </label>
<select id="sort">
<option value="100">Select</option>
<option value="smell">smell</option>
<option value="texture">texture</option>
</select>
Another way to do it, less lines.
function combo() {
let food = document.getElementById("food");
let sort = document.getElementById("sort");
console.log(food.options[food.selectedIndex].text + ', ' + sort.options[sort.selectedIndex].text);
}
<label for="food">Please select a food: </label>
<select id="food" onchange="combo()">
<option value="100">Select</option>
<option value="all">All</option>
<option value="cheese">cheese</option>
<option value="pickle"> pickle</option>
</select>
<label for="sort">Please sort: </label>
<select id="sort" onchange="combo()">
<option value="100">Select</option>
<option value="smell">smell</option>
<option value="texture">texture</option>
</select>
Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG
You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>
I have two drop downs, when dropdown-1 is changed, selected option of dropdown-2 should be changed to the same as dropdown-1
Dropdown-1:
<div className="select-style-right joiner-select">
<select className="selectalljoiners" onChange={this.handleMainSelectChanged} value={this.state.selectedJoinerValue}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
Dropdown-2:
<div className="select-style-right joiner-select">
<select className={index} value={this.state.selectedJoinerValue}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
handleMainSelectChanged:
handleMainSelectChanged = (e) => {
thisclass.setState({
selectedJoinerValue: e.target.value
})
}
New to React, don't know how to achieve this. Please help out.
If one of dropdowns changed the second one will take same selected option.
https://jsfiddle.net/b1atetou/
class Example extends React.Component {
constructor() {
super();
this.state = { value: "" }
}
handleDropDownChage = (event) => {
this.setState({value: event.target.value});
}
render() {
return (
<div>
<div>
<select onChange={this.handleDropDownChage} value={this.state.value}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
<div>
<select onChange={this.handleDropDownChage} value={this.state.value}>
<option value="">Select</option>
<option value="Permanent">Permanent</option>
<option value="Probationary">Probationary</option>
<option value="Contractual">Contractual</option>
<option value="Intern">Intern</option>
</select>
</div>
</div>
);
}
}