I am looking to auto fill form data based on a table row selection. My problem is I cannot set the correct Selected item in input boxes
I have tried using v-model (as below). I have also tried using
Html Input:
<select #change="typeSelected(selectedType)" v-model="selectedType">
<option v-for="type in types" v-bind:key="type.id" v-bind:value="type.id">{{ type.name }}</option>
</select>
Vue function to update the selected item
public setSelected(type: AssetTypeDto | undefined){
if(type) {
this.selectedType = type;
}
}
Also i tried <option :selected="type.id === selectedType.id". This didn't work either
Related
I have a select tag that should trigger function when an option is selected.
<select id="selector" class="form-control" #change="executeAction" v-model="selectedAction">
<option value="" selected disabled>Select action</option>
<option value="view">View Details</option>
<option value="edit">Edit</option>
<option value="delete">Delete</option>
</select>
methods: {
executeAction() {
console.log('action is se', this.selectedAction);
},
}
Now, what I expected was:
When selecting the same option for the second time (For example: View Details), it should log the selected option.
What I got:
It's not firing at all, I need to select other option so that I can reselect the View Details again.
What I tried:
Using watch, and the result was the same.
Using #input instead of #change, still result was same.
Usin v-on: instead of #, still no luck.
Is this a bug? or wrong implementation?
Anyways, would be great to have an answer to this.
I wish to have one item in my DDL to be a different color (red). However the list comes from a table and is not hard coded in the page like
<option value="Option 1">Option 1</option>
but rather as
#Html.DropDownListFor(r => r.Journal.Frequency, Model.JournalFrequencyList, "Select a Frequency", new { #class = "form-control" })
Is there a way to make just one item a different color?
You can update your styles/css to make one item red color. Now you did not specify which specific item you want. With jQuery, you can select a specific option and set the color of that to red.
Assume your razor view renders a SELECT element like this
<SELECT id="fancySelect">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</SELECT>
And if you want to set the color of the option which has value attribute set to "2", you can use the below code
$(function(){
$("#fancySelect option[value='2']").css('color','red');
//you can also apply a css class if needed
});
If you want to update a different option, update your jQuery selector to get that.
EDIT : As per the comment
is there any way to use the text as opposed to the value? Example
change if text is "Deleted"
You can update your jQuery selector to get the option with a specific text.
$("#fancySelect").find("option:contains('Deleted')").css('color','red');
I suggest you rely on option value than the text, you can set the value as a code which you can program against.
I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="">Select..</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
In the VM:
constructor(validation) {
this.agencies = null;
this.agencyId = 0;
this.validation = validation.on(this)
.ensure('agencyId')
.isNotEmpty();
}
activate() {
//call api and populate this.agencies
}
After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:
Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.
Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.
Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.
The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.
constructor() {
this.agencyId = ""; **//must match the bound property's initial value**
}
And in the view:
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
This is what I have currently with Geb. I want to be able to retrieve and set the value of a combobox (or drop down) in a page. I'm not quite sure how to do it, and the Book of Geb does not seem to cover this. This is the HTML element that I'm trying to work with.
<select style="height: 22px; width: 370px;" id="ddlContactTypes" name="ddlContactTypes">
<option value="-1">--Please Select--</option>
<option value="18">Customer Hauler</option>
<option value="19">Customer General</option>
<option value="20">Rolloff</option>
<option value="21">Supplier</option>
<option value="22">Leads</option>
<option value="23">Competition</option>
<option value="24">Employees</option>
<option value="25">Customer Car</option>
<option value="26">Secondary Metals Recycler</option>
<option value="27">Mills</option>
<option value="28">Brokerage Customers</option>
<option value="29">Type Jon</option>
</select>
This is what I've go so far. This currently will click the element, but I don't know how to actually select one. Any ideas?
static content = {
title {$("title")}
contactType { $("#ddlContactTypes") }
}
def addUser(){
contactType.click()
}
You can select an option by setting the value of the geb object :
contactType.value('20')
Above example will set the value to '20', making the list show 'Rolloff' as selected.
U can see this
HTML
Alt folk
Chiptunes
Electroclash
G-Funk
Hair metal
GOOVY
$("form").artist = "1" // first option selected by its value attribute
$("form").artist = 2 // second option selected by its value attribute
$("form").artist = "Ima Robot" // first option selected by its text
http://www.gebish.org/manual/0.9.2/navigator.html
Manual descibes it in section Setting Values
I'm trying to make a hidden field show by adding a class when the "other" option is selected from a pull-down list. But I'm not quite sure the correct way to do it.
I have the input hidden and when option is chosen I want to add the class "view" which adds display block making the hidden field visible.
Here is a fiddle showing what I have so far, any help would be much appreciated: http://jsfiddle.net/maikunari/NX795/
$(document).ready(function(){
$("#select-box").change(function(){
if($(this).val() == "other"){
$("#text-field").show();
} else {
$("#text-field").hide();
}
});
});
<select id="select-box">
<option value="Email Newsletter">Email Newsletter</option>
<option value="Yellow Pages ">Yellow Pages </option>
<option id="other-select" value="other">Other</option>
</select>