I would like to translate the options of my select but I do not know how to do that :
<select>
<option repeat.for="element of elementList" model.bind="element.id">
${element.value} <== How to translate the value ?
</option>
</select>
Could you please help me ?
The value would have to be a key in your translation file. Then you'd simply use the t binding behavior:
${element.value & t}
This would work for a model.bind expression as well, but that might not be what you want.
Related
I have a select box that originally has no value selected. The box shows as empty, and I would like a cypress test to check that there is no currently selected option, basically check that the select box displays no value.
How can I do that? I tried something like this:
cy.get('#filter-dropdown').should('have.text', '')
But this doesn't work because the text that it checks is a concatenation of all of the options together.
This is the HTML:
<select data-v-1="" id="filter-dropdown"
<option data-v-11d8b3dc="" value="a23"> Add Test </option>
<option data-v-11d8b3dc="" value="532"> Algo</option>
<option data-v-11d8b3dc="" value="732"> Another</option>
</select>
Edit: this is the same question I have, but the answer does not resolve the issue, probably why the answer was not accepted...
Stack Overflow
You can apply an assertion like this:
cy.get('#filter-dropdown')
.invoke('val')
.then((val) => {
expect(val).to.be.null
})
For code like below:
<div class="col-xs-4 col-sm-4 col-md-4 select-me show_me del_nxt" style="display: block;">
<select class="prime" name="primary" id="primary" onchange="newsecondary(this)">
<option value="none" id="1200">---Select main---</option>
<optgroup label="dummy1">
<option value="abc-2-1">abc</option>
<option value="xyz-2-1">xyz</option>
</optgroup>
<optgroup label="Dummy2">
<option value="abc1-2-1">abc1</option>
<option value="C1-2-1">C1</option>
<option value="D1-2-1">D1</option>
</optgroup>
</select>
<span class="Error"></span>
</div>
How to capture random value from dropdown list? thanks in advance.
Scenario is we have 4 drop downs with same type of html code as above.
Unless user selects any value from first drop down, another wont get enabled. this is how these 4 dropdowns are dependant on previous dropdown value .
Since content is html, the most maintainable way is to use CSS Selector Extractor based on this syntax:
Configuration would be the following:
You may use Regular Expression Extractor added to your request.
With the Regular Expression:
option value="([a-zA-Z0-9])+"
To ectract random value you need to set Match No to 0 as shown below
You may test your RegExp here regexr.com
Read more about Regular Expressions
If you want to select a random value and forget - go for HTML Links Parser
If you need the selected value anywhere else - you can extract it using i.e. XPath Extractor, it allows executing arbitrary XPath queries.
Get text of the selected option:
//select/optgroup/option/#selected/parent::*/text()
Get all options for optgroup with the label of dummy1
//select/optgroup[#label='dummy1']/option/#value
etc.
For the following XMl file,
<select id="pet" title="Pet" class="x8" onchange="" name="pet">
<option></option>
<option selected="" value="abc">Dog</option>
<option value="def">Cat</option>
<option value="ghi">Rabbit</option>
</select>
What is the Xpath to be able to get the value of the option with "Selected" property? (I need to get "abc")
One possible way to get value attribute of option element having selected attribute :
/select/option[#selected]/#value
That would take all options
/select/option
That would take 2-nd option and read value attribute from it.
/select/option[2]/#value
I want to get the value of the selected option from a dropdown list, in D3.js.
<select>
<option data-graph="1">1</option>
<option value="2">2</option>
</select>
I have seen this question which explains how to get the value when the select changes:
d3.select("#myselect").on("change", change)
function change() {
this.options[this.selectedIndex].value
}
But how can I get the selected value on page load, not when the select is changed?
I found this to be the simplest:
d3.select("#objectID").node().value;
Which is the text of the selected option in the following node: <select id="objectID"></select>
Note that d3.node() is documented at https://github.com/mbostock/d3/wiki/Selections#node and the .value property of an HTMLInputElement is documented on MDN at https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement.
Use the .property() method:
d3.select("#objectID").property("value")
You don't need to use D3 to do that:
var sel = document.getElementById('myselect');
console.log(sel.options[sel.selectedIndex].value)
I've also seen
d3.select("#objectID")[0][0].value
But I'm quite sure this is generally a bad idea...
for multiple selectdown form, how can you express multiple options selected ?
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
/html/body/form/select/option[1],option[2],option[3] ?
try this:
/html/body/form/select/option[1] | /html/body/form/select/option[2]
The pipe character ("|") join two sets, removing duplicate ones
Not tested, but wouldn't this be:
/html/body/form/select/option[#selected='selected']
Update: Based on your comment, would you not need something like:
/html/body/form/select/option[#val = '1' or #val = '3']
(though your example select doesn't have any val attributes)
maybe rather like "/html/body/form/select/option[#selected='selected']"