JS keep to selects in sync (no jquery) - javascript

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>

Related

Assigning a selected option from a dropdown to a variable in jquery

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();

How to select multiple select options with selenium

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()
}
}

How to copy selection from one select to another?

I have two select elements, with same number of options, and same values for these options, but different (translated) texts.
How can I copy selection from one to another?
From user perspective, if someone will select "red" (value=1) and "brown" (value=5) in English select, I want "rubrum" (value=1) and "rufum" (value=5) to appear selected in Latin select.
For <input> tags, this works:
$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.val( $(this).val() );
Sadly, this omits <select> tags.
I found many ways to copy items, but can't find a way to copy actual selection.
Fiddle here: http://jsfiddle.net/e53aJ/8/
Edit: I'd love it to work both for single and multiselect, if possible. I know at first I did not reflect that in my fiddle, sorry.
I saw your html markup there you supplied all option values to 1 that should be in order like below:
Html:
<div class=".common-identifier">
<select name="english" class=".common-identifier">
<option value=1>red</option>
<option value=2>green</option>
<option value=3>yellow</option>
<option value=4>blue</option>
<option value=5>brown</option>
</select>
<select name="latin" class=".common-identifier">
<option value=1>rubeum</option>
<option value=2>viride</option>
<option value=3>flavus</option>
<option value=4>caeruleo</option>
<option value=5>brunneis</option>
</select>
</div>
jQuery:
$('select[name="english"]').on('change', function () {
$('select[name="latin"]').val(this.value);
});
Fiddle
<select> elements have a property selectedIndex that indicates which of their options is selected.
If you get the selectedIndex of the one <select>, then set the selectedIndex of the other <select> to that, you should get the result you're looking for.
However, if your <select> accepts multiple selections (as your question implies), then it's a bit more tiresome. You have to loop through the <option> elements and check each one to see whether it's selected property is true.
(This is why jQuery's popular: the JavaScript DOM interface frequently sucks.)
$(this).closest('.common-parent')
.find(".common-identifier")
.not(this)
.attr('selectedIndex', $(this).attr('selectedIndex'));

select value of dropdownlist item jquery

HTML
<select id="selectDepartment">
<option value="1">120</option>
<option value="2">20</option>
<option value="3">140</option>
<option value="4">4120</option>
<option value="5">560</option>
<option value="6">451</option>
<option value="7">310</option>
<option value="8">656</option>
<option value="9">444</option>
<option value="10">555</option>
<option value="11">2560</option>
<option value="12">450</option>
</select>
jQuery
$("#selectDepartment").change( function() {
alert($("select option:selected").val());
});
the above function always shows value 1 on alert, when I select any one of the options
Your method of finding the selection option is vague. You're saying "Grab all <select>s". You then go on to grab the :selected option from each of them (of all <select>s on the page). Continued, .val() takes the first value off the top.
Simply put, you're always fetching the selected value of the first <select> found on the page. Assuming #selectDepartment isn't the first <select>, your value will never change.
Try to keep the scope to within the current <Select> using this:
$('#selectDepartment').change(function(){
var selopt = $('option:selected',this);
});
Note that I specify the scope to within the <select> that triggered the .change(). Also note this really isn't necessary as val() works just as easily:
var selopt = $(this).val();
Let jQuery do the heavy lifting. You really only need option:selected if you want control over styling that specific element, or you're working with a multi-select and want more control.
You can do something like this:
$("#selectDepartment").change( function() {
var selected = $(this).find(":selected");
});

Trigger change after items are selected in a multiple select

Let's say I have a multiple select box:
<select id="sel" multiple="multiple">
<option value="1">One</option>
<option value="2">Two</option>
<option value="9">Nine</option>
<option value="10">Ten</option>
</select>
To select items, you can hold down Ctrl and click on individual items. I want to save the data from this select box after the user is done selecting items. How can I do that?
I thought of using setTimeout and saving 500ms after the onChange event is triggered, but I don't know if this is the best idea.
$('#sel').change(function(){
setTimeout(saveData, 500);
});
I know I could add a 'Save' button, but I want to save the data on the fly.
What is the best way to save data from a multiple select box on the fly (after the user selects items)?
I would do it onchange, and after so much time has passed save it like you have, only thing I would change is resetting the timeout on each change so it only does it on the final onchange.
Something along these lines.
var changeTimeout;
$('#sel').change(function(){
clearTimeout(changeTimeout);
changeTimeout = setTimeout(function(){saveData()}, 1000);
});

Categories