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: []
};
}
Related
What I'm trying is something pretty basic, but I can't do it because the examples I see aren't anything similar to what I'm looking for.
There are 2 select, one of them you choose manually and the other dynamically changes depending on the value of the first one.
If the value of the first select is 1, that in the second one they only appear whose value is 1 as well.
I want to make it 100% JavaScript, I don't want any JQuery.
HTML.php
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
JavaScript.js
function catch_value_types() {
var types_value_option = document.getElementById("types").value;
// What should I put here?
}
Loop through the options and hide if value doesnot match
function catch_value_types() {
const selectedValue = document.getElementById("types").value;
const select2 = document.getElementById("food");
Array.from(select2.options).forEach((node) => node.style.display = node.value === selectedValue ? "block": "none");
}
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option>Please Select</option>
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
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>
I have two drop down select option menus being populated with json data via api call. I want to add the "Select" option as the first option which will have no value. Is there a way I can accomplish this in my view or in handlebars? I have tried the unshift method, but I can't seem to get the collection to successfully add the new option. Here is my code:
var productsMenuView = new Thorax.View({
template: Handlebars.compile($('#products-template').html()),
collection: new Thorax.Collection(
[{
id: selectMenu.id,
name: selectMenu.name
}]
),
initialize: function() {
this.collection.fetch({url: 'products.json'});
myString = this.collection;
obj = myString.unshift({id: "0", name: "Select"});
console.log(myString);
return obj;
}
});
Here is the Handlebars template:
<script id="products-template" type="text/x-handlebars-template">
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
<option value="{{name}}">{{name}}</option>
{{/collection}}
</script>
My menu displays this list of options:
<select id="productSelect" class="modelSearchMenus" data-view-cid="view21" data-view-helper="collection" data-collection-element="true" data-collection-cid="collection7">
<option value="Audio equipment" data-model-cid="c35">Audio equipment</option>
<option value="Cooktop" data-model-cid="c36">Cooktop</option>
<option value="Drill" data-model-cid="c37">Drill</option>
<option value="Fan" data-model-cid="c38">Fan</option>
<option value="Garbage disposal" data-model-cid="c39">Garbage disposal</option>
<option value="Microwave" data-model-cid="c40">Microwave</option>
<option value="Pruner" data-model-cid="c41">Pruner</option>
<option value="Range" data-model-cid="c42">Range</option>
<option value="Ratchet/nut driver" data-model-cid="c43">Ratchet/nut driver</option>
<option value="Vacuum" data-model-cid="c44">Vacuum</option>
<option value="Wall oven" data-model-cid="c45">Wall oven</option>
This is what I want the menu to display:
<select id="productSelect" class="modelSearchMenus" data-view-cid="view21" data-view-helper="collection" data-collection-element="true" data-collection-cid="collection7">
<option value="">Select</option>
<option value="Audio equipment" data-model-cid="c35">Audio equipment</option>
<option value="Cooktop" data-model-cid="c36">Cooktop</option>
<option value="Drill" data-model-cid="c37">Drill</option>
<option value="Fan" data-model-cid="c38">Fan</option>
<option value="Garbage disposal" data-model-cid="c39">Garbage disposal</option>
<option value="Microwave" data-model-cid="c40">Microwave</option>
<option value="Pruner" data-model-cid="c41">Pruner</option>
<option value="Range" data-model-cid="c42">Range</option>
<option value="Ratchet/nut driver" data-model-cid="c43">Ratchet/nut driver</option>
<option value="Vacuum" data-model-cid="c44">Vacuum</option>
<option value="Wall oven" data-model-cid="c45">Wall oven</option>
What am I doing wrong?
I'd just unshift another element into the collection if you can.
collection.fetch({
success: function(collection) {
collection.unshift(new Thorax.Model({name: 'Select'}));
}
});
Ideally you could have an id to set the `" but if not you can add an if statement like:
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
<option value="{{#if name === 'Select'}}{{else}}{{name}}{{/if}}">{{name}}</option>
{{/collection}}
Adding it to your template would probably be the easiest way of accomplishing this:
<script id="products-template" type="text/x-handlebars-template">
<option value="">Select</option>
{{#collection tag="select" id="productSelect" class="modelSearchMenus"}}
<option value="{{name}}">{{name}}</option>
{{/collection}}
</script>
I have a main drop down list which contains state names, when i select each state name i need to display the city names in a select box, but the select box name should be same because when i give different select box with same name the data is not storing in sql database. so i need to load the specific city names on each state select. any option
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
<option value="City2"> City2</option>
<option value="City3"> City3</option>
<option value="City3"> City3</option>
</select>
<select name="site">
<option value=""> Select Site </option>
<option value="City1"> City1</option>
</select>
Demo
You can use prop('disabled', true / false); to manage which city to choose. You should not have 2 selects with same name, so because you need them in sql I made a fix for it. Notice also in your post you miss first <select> and "City 3" comes up 2 times.
html
<select name="state" id="sel_state">
<option value="">Select your Location</option>
<option value="CHENNAI">CHENNAI</option>
<option value="GURGAON">GURGAON</option>
</select>
<select name="site" id="CHENNAI">
<option value="">Select Site</option>
<option value="City1">City1</option>
<option value="City2">City2</option>
<option value="City3">City3</option>
<option value="City4">City3</option>
</select>
<select name="site" id="GURGAON">
<option value="">Select Site</option>
<option value="City1">City1</option>
</select>
jQuery
$(function () {
$("#sel_state").change(function () {
var a = $("#sel_state option:selected").text();
if (a == 'CHENNAI') {
$('#GURGAON').prop('disabled', true);
$('#CHENNAI').prop('disabled', false);
$('#GURGAON').prop('name', 'site_ignored');
$('#CHENNAI').prop('name', 'site');
}
if (a == 'GURGAON') {
$('#CHENNAI').prop('disabled', true);
$('#GURGAON').prop('disabled', false);
$('#GURGAON').prop('name', 'site');
$('#CHENNAI').prop('name', 'site_ignored');
}
});
});
I have a form with 2 drop down lists on the same page using the same ids.
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select id="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select id="county">
<option value="">Select a country first...</option>
</select>
Not sure how to I change the JavaScript code so the second county drop down list functions same as the first one. The existing javascript and how it functions can be seen here:
http://jsfiddle.net/pfYEb/10/
You'll probably want to use class="country" instead of id="country" so that your selector will match both. (same for your id="county") In your jsfiddle, you'll also need to distinguish which county to change within your country change event. One easy way to do this is to use the index of the current element.
I've forked your jsfiddle here.
HTML
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
<div style="clear:both"> </div>
<select class="country">
<option value="">Any</option>
<option value="ENGLAND">England</option>
<option value="IRELAND">Ireland</option>
<option value="SCOTLAND">Scotland</option>
<option value="WALES">Wales</option>
</select>
<select class="county">
<option value="">Select a country first...</option>
</select>
Relevant Javascript:
$('.country').change(function() {
var country = $(this).val(),
county = $('.county').eq($(".country").index(this)); // This matches the county
// Empty county dropdown
county.empty();
// Update dropdown with appropriate contents
if (country === '') {
county.append('<option value="">Select a country first...</option>');
} else {
$.each(counties[country], function(i, v) {
county.append('<option value="' + i + '">' + v + '</option>');
});
}
});
You can't really solve this querying by id. Element ID's have to be unique within a document by specification by the way. Your best shot, use classes instead.