I have a dijit.form.Select on my page:
<c:set var="qualId" value="${previous.qualification.id}" />
<select id="qualification" name="qualification" dojoType="dijit.form.Select" onchange="checkForPHD()">
<option value="-1" label=" "> </option>
<c:forEach items="${requestScope.qualifications}" var="qualItem">
<c:choose>
<c:when test="${qualId eq qualItem.id}">
<option value="${qualItem.id}" selected = "selected">${qualItem.name}</option>
</c:when>
<c:otherwise>
<option value="${qualItem.id}">${qualItem.name}</option>
</c:otherwise>
</c:choose>
</c:forEach>
</select>
Then some javascript that I'm trying to use to set some text to the TEXT of the option chosen from the select box;
function checkForPHD() {
dojo.byId('clazzPHDMessage').innerHTML = dojo.byId('qualification')
.attr('displayedValue');
}
I'd read that the .attr('displayedValue') was suppose to get the text from the selected option in a dijit.form.Select but it doesn't seem to do much? .attr('value') got that values ok but I need the TEXT?
You should use dijit.byId() to get widget instance. Try to use this code to get selected text:
dijit.byId('qualification').attr('displayedValue')
Seems like what you want is the innerHTML of the currently selected option (<option>THIS TEXT??</option>). I think this should do the trick. Loop over all the select's options with getOptions and find the selected one, then return its innerHTML. I don't know if dijit.form.Select has a selectedIndex property, but that would help too.
function getSelectedText() {
dojo.foreach(dijit.byId("qualification").getOptions(), function(opt, i) {
if (opt.selected) {
return opt.innerHTML;
}
});
}
You should try to get the selected node first, then get the attribute you want, as follows:
dijit.byId("qualification").getSelected().attr('innerHTML');
You can try the below Code Snip
dijit.registry.byId("regionList").value;
<select name="regionList" id="regionList" data-dojo-id="regionList" data-dojo-type="dijit/form/Select">
<option value="" selected="true">Select LoB</option>
<option value="Asia" >Asia</option>
<option value="Africa" >Africa</option>
</select>
Related
I am new in vue js please help.
I have two dropdowns and that that dropdown create from loop
<select v-if="tour.city_expert == 2" v-model="selected[index]" class="form-control" :id="'city_expert_both'+index" v-on:change="intiTourCityExpert(index, $event)" :disabled="tour.is_disable==true">
<option value="" selected>Select City Expert</option>
<option value="Guideinperson">Guide in person</option>
<option value="AudioGuide">Audio Guide</option>
</select>
I as per image I want reset dropdown if I uncheck the checkbox but only reset single row as I uncheck the checkbox.
I set v-model="selected[index]" on dropdown and set code on uncheck this.$set(this.selected, index, ''); but its not working.
Help
I ran into similar situation, and following worked for me.
And to rest try following anywhere - this.selectedStatus = '0';
<select id="item_status" class="form-control" v-model="selectedStatus">
<option value='0'></option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
If I were you, I would do something like this:
Add an onchange event to the checkbox with its index:
#change="onChange(index)"
In the methods object define the function
onChange like this:
methods: {
onChange(index) {
this.selected[index] = ''
}
}
If you want to reset the value of dropdown on click on any other button or so, than just set it to null.
this.accountType = null;
My Dropdown:
<ejs-dropdownlist
v-model:value="accountType"
:dataSource="accountTypesData"
:select="accountTypeSelect"
placeholder="Select a type"
></ejs-dropdownlist>
I have a dropdown select, and using several css to remove some of the default look. But somehow when I load the page, the select field is empty, but it should show the default value. I can't make it work.
<select v-model="order.billing.address.country" :disabled="form" v-validate="'required'" name="country">
<option selected disabled>{{$t('country')}}</option>
<option value="AT">{{$t('AT')}}</option>
<option value="BE">{{$t('BE')}}</option>
</select
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0px;
}
can any of this make the problem, or the HTML part is wrong? I'm only having problem with the default value, after selecting something it works.
When you use v-model, the selected in the DOM won't matter. The <select> will have as selected whatever value the v-model points to.
To have that <option> as selected, give it a value and set order.billing.address.country to it.
Example:
// somewhere in the code
order.billing.address.country = -1;
<select v-model="order.billing.address.country" :disabled="form" v-validate="'required'" name="country">
<option value="-1" disabled>{{$t('country')}}</option>
<option value="AT">{{$t('AT')}}</option>
<option value="BE">{{$t('BE')}}</option>
</select
Question: what is the expected default value, an empty string or the first option?
If empty string: you can update the first option to have a default value of empty.
<option value="" disabled>{{$t('country')}}</option>
If the first option which is:
<option value="AT">{{$t('AT')}}</option>
Remove:
<option value="-1" disabled>{{$t('country')}}</option>
And that should work I guess. If not then you have to trigger change on your select element to register the value.
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
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);
I have a shared view that is going to be called for each item in a collection. In this view I want to have a dropdown list that will contain the Id, Text and image url of the information selected item. When an Item is selected I want to show the image in an image tag.
I got to this code
<select id="themes" onchange="javascript:document.getElementById('themePlaceHolder').src=this.options[this.selectedIndex].getAttribute('data-url')">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
This works perfectly when my collection has only one element, but if it has 2 or more, I have issues with the ID used to identify the image tag because it is duplicated.
Is there anyway to generate the ID so it isn't duplicated but still reference it on my onchange element?
Try with jQuery:
Pseudo code:
<select class="themes">
<option value="" data-Url="" >Select a theme</option>
#foreach(Theme theme in Model.Themes) {
<option value="#theme.Id" data-url="#theme.Url" >#theme.Name</option>
}
</select>
<img id="themePlaceHolder" src="" />
$(".themes").change(function(){
// to get selected text
$(this + " option:selected").text();
// to get selected value
$(this).val();
// Now do what ever you want using this value
});