I have a dropdown with the following attributes on it:
<select value.bind="row.columns[$parent.$index].colSize" change.delegate="changeColumnSize($parent.$index, $index, row.columns[$parent.$index].colSize)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
But it seems that I cannot pass row.columns[$parent.$index].colSize as an parameter. It is always undefined.
How can I pass the selected value of the dropdown directly to the change events method?
You're missing the value.bind in your select options. I prefer to use mode.bind instead of value.bind though. Try something like this:
<template>
<select value.bind="changedValue" change.delegate="DropdownChanged(changedValue)">
<option model.bind="1">1</option>
<option model.bind="2">2</option>
<option model.bind="3">3</option>
<option model.bind="4">4</option>
</select>
</template>
export class App {
changedValue;
DropdownChanged(changedVal) {
alert(changedVal);
}
}
I'm not sure what you're trying to bind the select to, but basically you want to create a variable that you can bind the selected value too. So, the selected value is going to be set to the variable of changedValue. I like to use model.bind because I can bind true/false values instead of everything being a string.
I've made a running Gist for you to use if needed:
https://gist.run/?id=87f6897928feb504dad638d439caf92f
Related
UPDATED
select input's selected option is not working if I use v-model on select.
<p class="topics">fruits</p>
<select class="select" v-model="selectFruit">
<option selected value="">--all--</option>
<option :key="index" :value="item" v-for="(item,index) in fruitList">{{item}}</option>
</select>
if I don't use v-model, then selected is working. But I need that v-model bind for filter my array. But it looks like I can't use v-model and selected at the same time.
Use selected attribute
https://www.w3schools.com/tags/att_option_selected.asp
<select class="select" v-model="searchCity">
<option value="" selected>--全部--</option>
<option :value="item" v-for="item in uniqueCity">{{item}}</option>
</select>
Adding a bonus to the above answer, if you want to have a default placeholder but not a valid value (Like "Select country here") you can do it like this:
<select>
<option value="" selected disabled hidden>Select country here</option>
<option value="1">Bulgaria</option>
<option value="2">Serbia</option>
<option value="3">Cyprus</option>
</select>
I would like to add a disabled option to a select that I have bound with v-for binding. The Vue docs on select suggests adding one but the example is using hard coded options.
I want to create a disabled 'Please select one' with v-for binding to force the user to pick a option rather than defaulting to a particular selection. I currently add a 'Please select one' option to the list I'm binding the select to and it shows up and works fine but I don't want the user to be able to choose it again.
How can I accomplish this when using v-for binding to a select?
//Contrived example of adding the default selection text
data.dashboardDefinitionList.splice(0, 0, { Id: 0, Name:"Select a Dashboard" });
<select id="dashboardSelectNew" v-model="formVariables.dashboardDefIndex" v-on:change="getDashboard">
<option v-for="(dd, index) in dashboardDefinitionList"
:value="dd.Id"
:selected="formVariables.dashboardDefIndex == index">
{{ dd.Name }}
</option>
</select>
Put your disabled option first, then do the v-for.
<select id="dashboardSelectNew" v-model="formVariables.dashboardDefinition" #change="getDashboard">
<option disabled value="">Please select one</option>
<option v-for="dd in dashboardDefinitionList" :key="dd.id" :value="dd">
{{ dd.Name }}
</option>
</select>
Note that I've also attempted to clean up your model / value binding but you may not want or need it.
For the initial value, you would set it to an actual entry from your list instead of a specific index, eg
this.formVariables.dashboardDefinition = this.dashboardDefinitionList[someIndex]
You can use it like this adding disabled selected to appear first and cannot be selected also good practice to put value="0" because you are using id in the value attribute
<select id="dashboardSelectNew" v-model="formVariables.dashboardDefIndex" v-on:change="getDashboard">
<option value="0" disabled selected> Please select one </option>
<option v-for="(dd, index) in dashboardDefinitionList"
:value="dd.Id"
:selected="formVariables.dashboardDefIndex == index">
{{ dd.Name }}
</option>
</select>
I'm using VBA to open a website, login, and navigate to a certain page. There is a dropdown with 8 options.
I used this code to change the dropdown to the value I want, but it always reverts back to the default as I continue. How do I lock this change in?
Set Element = IE.Document.getElementsByName("date_range")
Element.Item(0).Value = "custom"
Here's the page code:
<div class="SelectInput">
<select class="SelectInput-select" name="date_range">
<option value="all_time">All Time</option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
<option value="this_month">Month to date</option>
<option value="last_month">Last Month</option>
<option value="this_year">Year to date</option>
<option value="last_year">Last year</option>
<option value="custom">Between...</option>
</select>
<div class="SelectInput-arrows">...</div>
</div>
Thanks,
you need to set the selected attribute .... ref: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_selected
I am trying to use Elements to get an array of elements, but it doesn't work here.
Any one can help me with that? thanks a lots.
here is my code:
<select name="test" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
Now I am trying to get all the option elements:
client.url('www.somesite.com')
.elements('#select>option').then(function(res){
console.log(res.length);
})
But I got 'undefined' result for 'res.length' .
If I use getText then I can get the correct result:
client.url('www.somesite.com')
.getText('#select>option').then(function(res){
console.log(res.length);
})
You need to access the value property.
console.log(res.value.length);
how can i get visible value from disable dropdown list ?
Best Regards,
thank you
You can use selenium.getSelectedValue() or selenium.getSelectedLabel(). Both are described here.
If you have a dropdown list defined as follows:
<select name="dropdown" disabled>
<option value="1">one</option>
<option value="2">two</option>
<option selected value="3">three</option>
<option value="4">four</option>
</select>
Then you can use the following script to assert that the (disabled) selected label is 'three'.
String selectedLabel = selenium.getSelectedValue("name=dropdown");
assertEquals("three", selectedLabel);