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);
Related
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'm trying to use tooltipster jQuery plugin, but it doesn't work for or tag :
I've just tried this simple code :
<div id="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
--> div works fine
<select id="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
--> select doesn't work
<span id="my-tooltip">
test with span
</span>
--> span doesn't work
Could you please help me ?
here is my page
thank you all !
From looking at your code and site the issue is due to your multiple use of the id my-tooltip. IDs should only be used once to identify one node. A simple test can be done to prove this using jQuery, try running this on the page:
jQuery('#my-tooltip')
You'll see that only one node is returned, this is the one that has your initialised tooltip.
To fix this you'll need to change your nodes to use classes, i.e.
<div class="my-tooltip">
This div has a tooltip with HTML when you hover over it!
</div>
<select class="my-tooltip" name="select">
<option value="value1">Valeur 1</option>
<option value="value2" selected>Valeur 2</option>
<option value="value3">Valeur 3</option>
</select>
<span class="my-tooltip">test with span</span>
In your tooltipster setup, you'll want to have the following selector and options enabled:
jQuery('.my-tooltip').tooltipster({
// Original setup
content: jQuery('<span><img src="/../../../popup.png" /> <strong>This text is in bold case !</strong></span>')
// Additional options
multiple: true,
contentAsHTML: true
});
I hope this helps! :)
I have the following code in html:
<select>
<option text="item9" value="9"></option>
<option text="item10" value="10"></option>
</select>
The select shows up as blank in firefox. There are no elements. But it works in IE. The following works in both:
<select>
<option text="item9" value="9">item9</option>
<option text="item10" value="10">item10</option>
</select>
I am using the following dojo code to create the dropdown:
dojo.byId("sel1").add(dojo.create("option", { text:optionText, value:docNode.childNodes[i].getAttribute("id") }));
How do I create
<option text="item9" value="9">item9</option>
with dojo?
All you really need is:
<select>
<option value="9">item9</option>
<option value="10">item10</option>
</select>
The text attribute is non-standard.
You can use:
dojo.byId("sel1").add(dojo.create("option",{
innerHTML:optionText,
value:docNode.childNodes[i].getAttribute("id")
}));
I am trying to add view all option to the
pagesize option
Something silmilar to below:
<select class="pagesize">
<option value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="all">View All</option>
</select>
for JQuery tablesorter.
How is that possible?
Please share some example or tutorial.
Thanks,
Since you control the pagesize selector, just add a really large value in the view all option:
<select class="pagesize">
<option value="10">10 per page</option>
<option value="20">20 per page</option>
<option value="500">View All</option>
</select>
I tried it and it works without causing any errors, but if you want to be more specific, you can add a bit of code to make it more exact:
$(function(){
var rows = $('table.tablesorter')[0].config.totalRows;
$('select.pagesize').find('option:contains("All")').val(rows);
});
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>