I am writing a test using Selenium Webdriver. I want to select the second option of every dropdown menu that may appear on the page. The number of dropdown menus will be different every time.
This is what I've come up with and It does not work:
if (driver.findElements({tagName: 'select'})) {
var select = driver.findElements({tagName: 'select'});
for (i = 0; i < select.length; i ++) {
i++;
driver.findElement(webdriver.By.xpath('//select['+i+']/option[2]')).click();
}
}
HTML:
<select class="form-control" name="answer_4282670">
<option value="0">Please choose one...</option>
<option value="option a">option a</option>
<option value="option b">option b</option>
<option value="option c">option c</option>
<option value="Other" data-other-flag="">Other</option>
</select>
The value of each option will be different in each instance, so we can not choose anything by its value
How can I fix this so it will click the second option of a menu for each one that will show up (if one shows up)?
I am using webdriver js, and nth child works for me:
driver.click('#my_select_box').click('#my_select_box option:nth-child(3)')
I know that this is not a direct anwser, but i cant comment your post yet so i hope you are fine with that.
I havent worked with selenium myself, but i wanted to start using it, and I tried to learn alot from this website: https://code.google.com/p/selenium/wiki/AdvancedUserInteractions and after doing some research i found a similar question. how to select element in multi select box in selenium webdriver The big difference is, that the anwser was given in java.
Even though its not the perfect solution I hope those 2 links can help you, and again sorry that I cant write that as a comment
You can apply this logic: define a list variable with accessing second option of all dropdown like .form-control > option:nth-child(3) then iterete over this and call .click event for each item.
if (driver.findElements({css: '.form-control > option:nth-child(3)'})) {
var selects = driver.findElements({css: '.form-control > option:nth-child(3)'});
for (i = 0; i < selects.length; i ++) {
selects[i].click()
}
}
Related
Good Afternoon
I am using materialize multiple select for the user select multiples values, but instead of displaying each value in the input I want to show:
"Selected: 5"
In other words, I want to show the quantity of elements that the user selected, so this way the user will have a clean input, but I've tried many approaches and I didn't achieve this.
I was able to get the amount of items checked by the user, but when I've tried to set using the id of the select or the id of the div/input I didn't achieve this result, practically using the select id I can set the values but this one that I want makes the multiple select stay with the last value selected and using the id of the div doesn't change anything.
Below you will find the code that I've tried.
I hope that someone knows a way to tricky and achieve this.
FIDDLE: https://jsfiddle.net/dp90tgju/
<div id="myInput" class="input-field">
<select id="filterOptions" multiple>
<option value="" disabled>Choose your option</option>
<option value="1">Toys</option>
<option value="2">Comics</option>
<option value="3">Magazines</option>
<option value="4">Gym</option>
</select>
<label>Filter</label>
</div>
$("#filterOptions").on('change', function() {
console.log($(this).val());
if($(this).val().length !== null){
var numberOfElements = $(this).val().length;
console.log("Number:" + numberOfElements);
$(this).val("Selected");
}
$("#myInput").val('Selected: 2');
});
Thanks for the help
I want to assign the chosen option from the dropdown to become the selectedSubject variable but am having problems with it, I had code which half worked...
selectedSubject = $('select#subject-options').val();
But when a different option is selected it doesn't change??
And need it change for the game I am creating
HTML:
<p>Subjects</p>
<select id="subject-options" name="subject-options">
<option selected disabled >Please Choose</option>
<option id="BBT" value="$BBT">Big Bang Theory</option>
<option value="$LOTR">Lord Of The Rings</option>
<option value="$EPL">EPL Football Teams</option>
<option value="$ASIA">Asian Countries</option>`
</select>
Jquery:
const $BBT = ['sheldon','leanord','spock','cheescake``factory','howard','raj','star` `trek','penny','amy','bernadette','physics','laundry','halo` `night','dumplings', 'brisket','nasa','string theory','dark matter',` `'comiccon'];
let selectedSubject = $BBT;
selectedSubject = selectedSubject[Math.floor(Math.random() * selectedSubject.length)];
I have been through 7 different questions similar and couldn't find anything that helped me, so if anyone could help me directly or direct me to another question that has been answered that will help me in my troubles.
You must add an event handler to #subject-options to update the selectedSubject variable each time you change your selection.
$('#subject-options').on('change', function() {
selectedSubject = $('#subject-options option:checked').val();
});
JS Bin
In your jQuery selector you grab the select object itself. You need the option object and especially the one that is selected.
selectedSubject = $('select#subject-options option:selected').val();
I have two SELECT elements on a page and what I need to do is if the first one is changed, have the second contain all the OPTIONS from the first except the one that is currently selected in the first.
They start off with identical options and I can disable the second until the first is selected if needed. So, if I have:
...
<select id="selectOne" onchange="someFuntion()">
<option value="1">One</>
<option value="2">Two</>
<option value="3">Three</>
</select>
<select id="selectOne" onchange="someFuntion()">
<option value="1">One</>
<option value="2">Two</>
<option value="3">Three</>
</select>
...
...and Two is selected in the first, then it should be removed from the second. Then if Three is selected in the first, the second should have everything in listed in the first (including Two again) except Three. The first ones options never change and the second should always have everything in the first except the currently selected option. Any ideas on how best to accomplish something like this?
I cannot bring JQuery into the mix for this, so please no Jquery specific answers. Beyond that open to pretty much anything. I can get the initial value selected in the first removed from the second, but am not sure how to handle changes from there.
TIA!
If disabling the options in selectTwo is fine, you might do something like this. If not, you might "hide" the matching option with a display:none class and use classList.add and classList.remove to hide and show rather than disable and enable.
Both the hide and disable methods here result in the possibility that the item to remove is the once currently selected in selectTwo. Neither strategy is great in that situation. If you must avoid it, you might either set the value of selectTwo to a "good" one or alternatively, delete the children of selectTwo and clone the non-selected children of selectOne and add those to selectTwo.
If you want an example of the remove/clone strategy let me know and I will post that.
function selectClick(event) {
var that = document.querySelector("#selectTwo");
var thatOptions = that.querySelectorAll("option");
for (var i = 0; i < thatOptions.length; i++) {
thatOptions[i].disabled = (thatOptions[i].value === this.value);
}
}
document.querySelector("#selectOne").addEventListener("change", selectClick);
<select id="selectOne">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select id="selectTwo">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Hi everyone I'm fairly new and unfamiliar with JavaScript/Web Dev and I'm trying to make two dropdown menus, where the second menu changes depending on what they choose on the first one
for example
Choice1
Choice2
Choice3
and if they choose Choice1 the next drop down might be
Choice1.1
Choice1.2
and a follow up question would be, how can I get what the User chose?
This also does not have to be written in javascript.
Any help/resources/readings would be very helpful (I've tried doing google searches but I couldn't find anything)
Thank you!
I have created simple demo app for you, give it a try.
Further study reference
http://api.jquery.com/
http://www.w3schools.com/jquery/default.asp
https://api.jquery.com/change/ - To understand more on change event
$("#select_1").on("change", function(evt) { //Using jQuery subscribe for change event of select_1
var $select_2 = $("#select_2");
$select_2.empty(); //Empty the select before adding new items.
for (i = 0; i < 5; i++) {
$select_2.append($("<option>Sub choice " + $(this).val() + "__" + i + "</option>"));
}
});
$("#select_1").change(); //Trigger change event on page load so that the second select gets properly set
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Choices</label>
<select id="select_1">
<option value='1'>Choice 1</option>
<option value='2'>Choice 2</option>
</select>
<BR />
<label>Sub Choices</label>
<select id="select_2">
<option>Please select</option>
</select>
I have searched quite a bit for the answer to this question, but no satisfactory result found.
I have this code:
<select name="items[]" size="0" id="feed-items-list" style="width:100%;" multiple="">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
How do I remove all the selected options?
Thank you!
I know you tagged prototypejs, but I've never used it before and it's easy enough with vanilla JS. Here's how to loop over the <option>s and see if they're selected or not:
var select_element = document.getElementById("feed-items-list");
var options = select_element.options;
var i = options.length;
while (i--) {
var current = options[i];
if (current.selected) {
// Do something with the selected option
}
}
DEMO: http://jsfiddle.net/tFhBb/
If you want to physically remove the option from the page, then use:
current.parentNode.removeChild(current);
If you want to unselect them, then use:
current.selected = false;
To do this with PrototypeJS (as you tagged the question)
$('feed-items-list').select('option:selected').invoke('remove');
This will select elements with the CSS selector option:selected within the descendants of feed-items-list. Then invoke the specific method of remove on that element.
If you just want to unselect the option as Ian mentioned as well
$('feed-items-list').select('option:selected').each(function(i){
i.selected = false;
});