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']"
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
})
I'm working with an application written in dHTML and running on a Windows 10 laptop using the Apache server. I have some lines of simple code that generate a 2 SELECT statements as follows.
print " Choose an effort: <SELECT NAME='echoice' CLASS='slcts' SIZE='16' STYLE='width:180px' ONMOUSEOVER=\"setStatus2('Only efforts with measures your authorized to work with are shown.');\" ONMOUSEOUT=\"setStatus2(' ');\" ONCHANGE=\"Loadem('choice');\">\n";
foreach $iline (#ilines) {
print "<OPTION VALUE='$iline'>$iline</OPTION>\n";
}
print "</SELECT>\n";
print "Choose $what: <SELECT NAME='choice' CLASS='slcts' SIZE='16' STYLE='width:180px'>\n";
if ($cmfunction eq 'MeasureDescriptions' && $action eq 'U') {
print "<OPTION SELECTED VALUE='new'>new</OPTION>\n";
$imo = 1;
}
foreach $mline (#mlines) {
$thestr = ($i == 0 && !$imo) ? 'SELECTED' : '' ; # Select 1st measure if not a single model.
print "<OPTION $thestr VALUE='$mline'>$mline</OPTION>\n";
$i++;
}
print "</SELECT>\n";
I don't seem to be able to change the contents of this field as long as the first select is there. First I put a new unique character in the 2nd SELECT text each test to tell me if I'm executing the module version I think I am. I always see the unique character.
I have tried the following.
comment out the inner 2 print statements,
change >new< to >new1<,
assign 'dog' to the 0 position of the mlines array, and
add a print after the Option loop to add a 'dog' option.
In all four cases, the choice SELECT had the same options as it had before any of the tests (1-4) were implemented. But if I remove the first select,
I can then modify the options of the 2nd select. The debugger image of the above code follows with both selects.
Choose an effort: <SELECT NAME='echoice' CLASS='slcts' SIZE='16' STYLE='width:180px' ONMOUSEOVER="setStatus2('Only efforts with measures your authorized to work with are shown.');" ONMOUSEOUT="setStatus2(' ');" ONCHANGE="Loadem('choice');">
<OPTION SELECTED VALUE='all'>all</OPTION>
<OPTION VALUE='Health'>Health</OPTION>
<OPTION VALUE='HealthCare'>HealthCare</OPTION>
</SELECT>
Choose a measure !: <SELECT NAME='choice' multiple CLASS='slcts' SIZE='16' STYLE='width:180px' ONMOUSEOVER="setStatus2('Only measures your authorized to work with are shown. Select a measure for a formal definition.');" ONMOUSEOUT="setStatus2(' ');" ONCLICK='doFRef(event,this,this.form)'>
<OPTION SELECTED VALUE='new'>new</OPTION>
<OPTION VALUE='HEComp90'>HEComp90</OPTION>
<OPTION VALUE='HECompAtBirth'>HECompAtBirth</OPTION>
<OPTION VALUE='healthy'>healthy</OPTION>
<OPTION VALUE='infant'>infant</OPTION>
<OPTION VALUE='maternal'>maternal</OPTION>
<OPTION VALUE='stillbirths'>stillbirths</OPTION>
</SELECT>
The debugger code with only one select follows. I changed new to new1 and added the line and line2 options. But if I put the first select back in,
I can't modify the 2nd select and it contains what is shown in the 1st debugger image.
<OPTION SELECTED VALUE='new'>new1</OPTION>
<OPTION VALUE='line'>line</OPTION>
<OPTION VALUE='HEComp90'>HEComp90</OPTION>
<OPTION VALUE='HECompAtBirth'>HECompAtBirth</OPTION>
<OPTION VALUE='healthy'>healthy</OPTION>
<OPTION VALUE='infant'>infant</OPTION>
<OPTION VALUE='maternal'>maternal</OPTION>
<OPTION VALUE='stillbirths'>stillbirths</OPTION>
<OPTION VALUE='line2'>line2</OPTION>
</SELECT>
I don't understand this. Any help will be appreciated. It must be me.
Thanks,
craigt
It was me. There is an ONLOAD process that executed another process that preps
the content of that field that was not written correctly. I've corrected that process and all works as expected now. This question is closed. And I apologize for my oversight and thank everyone that took a look.
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.
I'm trying to select option 2, but first it is selecting 2 then changing to 1.
This is the HTML of the select list:
<select id="IDITForm#additionalVehicleDrivers|1#youngestDriverExperienceVO#id">
<option style="background-color: rgb(252, 218, 175);" value="-1">Select</option>
<option value="1">0</option>
<option value="2">1</option>
<option value="3">2</option>
<option value="4">3</option>
<option value="5">4</option>
<option value="1000000">5</option>
<option value="1000001">more than 5</option>
</select>
This is the Watir code for selecting 2:
b.select_list(:id,"IDITForm#additionalVehicleDrivers|1#youngestDriverExperienceVO#id").select "2"
The problem is that you are using Watir-Classic's select method with a parameter that matches both an option's text as well as another option's value.
If you take a look at the code for the Watir::SelectList#select method:
def select(item)
matching_options = []
perform_action do
matching_options = matching_items_in_select_list(:text, item) +
matching_items_in_select_list(:label, item) +
matching_items_in_select_list(:value, item)
raise NoValueFoundException, "No option with :text, :label or :value of #{item.inspect} in this select element" if matching_options.empty?
matching_options.each(&:select)
end
first_present_option_value matching_options, :text
end
You can see that:
It gets a list of matching options based on text, label and value and
Then for each matching option Watir-Classic selects it.
For your specific example, this means that
2 options match the input "2":
<option value="2">1</option> matches since its value is "2"
<option value="3">2</option> matches since its text is "2"
Watir-Classic is selecting each of these options, in this specific order, which is why you see the dropdown switch to "1" and then "2"
Given the way the method is written and how your select list is written, you cannot use the select method. While the best choice is to move to Watir (previously Watir-Webdriver), there are workarounds in Watir-Classic.
Remove the ambiguity by specifically selecting an option based on only the value attribute:
id = "IDITForm#additionalVehicleDrivers|1#youngestDriverExperienceVO#id"
b.select_list(:id, id).select_value "3"
#=> will select <option value="3">2</option>
If you want to stick to selecting by text, directly locate/select the option element:
id = "IDITForm#additionalVehicleDrivers|1#youngestDriverExperienceVO#id"
b.select_list(:id, id).option(:text, "2").select
#=> will select <option value="3">2</option>
For Watir, you can use index based options where you need to worry about index only. Such as for:
<option value="2">1</option>
We can use,
browser.select_list(id: 'IDITForm#additionalVehicleDrivers|1#youngestDriverExperienceVO#id').options[2].select
As it is the 3rd index of given select_list and it follows zero based index ordering. Similarly for,
<option value="3">2</option>
We can use
browser.select_list(id: 'IDITForm#additionalVehicleDrivers|1#youngestDriverExperienceVO#id').options[3].select
As it is the 4th index of given select_list.
#select matches the text.
If you want to select by value you need to use #select_value:
b.select_list(id: "IDITForm#additionalVehicleDrivers|1#youngestDriverExperienceVO#id").select_value "2"
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...