We Keep Coding

Unable to change <select> field more than once using Cypress

I'm new to using Cypress and just writing a few basic tests for our application to see it in action. However, I've encountered an issue that I haven't been able to resolve or locate a solution for yet; however, at first, glance appears to be relatively straightforward.
When navigating to a page, we have a few select fields a user can change, which will alter the text of a div depending on their selection. These fields are also saved onChange to our database, so when a user uses this object again, we can pre-populate the fields.
When the database is clear of any pre-selected options, the select will correctly be set to European Union, and the dynamic text will be tested and confirmed.
cy.get('#jurisdiction').select('European Union', { force: true })
// Assertion to confirm preview
cy.get('.ilPreviewDiv').invoke('text').then((text) => text.trim()).should('equal', 'text1, text2, text3, text4.')
Afterward, the select will then correctly be switched to United States, the assertion for dynamic text will always fail. I've even attempted to extend the timeout; however, it doesn't appear to make a difference as it doesn't appear actually to wait as long as I set it too.
cy.get('#jurisdiction', { timeout: 15000 }).select('United States', { force: true })
// Assertion to confirm preview
cy.get('.ilPreviewDiv').invoke('text').then((text) => text.trim()).should('equal', 'text1, text2, text3.')
I'm unsure why this occurs as it seems simple enough, but I'm clearly doing something incorrectly. In addition to this, I've placed the select field code below.
<select name="jurisdiction" id="jurisdiction" class="" onchange="updateSelectedJurisdiction(33652); updateOptions(this);">
<option value="">N/A</option>
<option value="United States">United States</option>
<option value="Canada">Canada</option>
<option value="European Union" selected="">European Union</option>
<option value="US and CA">US and CA</option>
<option value="US and EU">US and EU</option>
<option value="US, CA, and EU">US, CA, and EU</option>
</select>
In addition to this, if the database has European Union stored, the .select('United States') appears to be successful; however, the value in the select never changes, and therefore the dynamic text never updates, and the assertion fails.
Any assistance that could be provided would be greatly appreciated. I really appreciate any help you can provide.
Edit:
As suggested, I tried adding .trigger('change') to the end of the .select() and instead now getting an error saying it failed because the element is detached from the DOM. A quick Google search seemed to suggest many others have had this problem, and despite trying to follow along, I've still been unsuccessful. It might be due more to my inexperience than anything but still stuck trying to resolve.

JavaScript .selectedIndex only changes text value rather than actually selecting option

*** EDIT - Switching to Chrome from Firefox 52.0.1 (32-bit) solved this problem **
I'm trying to speed up some data entry in some accounting software and have code to input details into a form to generate an invoice. The problem is with the select box.
document.getElementById('invoice_bank_account_id').selectedIndex = 2;
Which correctly sets the option of a dropdown menu to what I need.
However this only changes the text, when I click on the submit button for the form in question it behaves as if I had never changed the selected option and defaults to the first option in the dropdown list. I have to physically select and click for it to 'update' properly.
What do I need to do after selecting my option for it to work on form submission?
I also tried various combinations such as
document.getElementById('invoice_bank_account_id').options[2].selected = true;
... with the same result.
The code of the form is:
<fieldset id="advanced_options_fieldset" class="blockf">
<div id="advanced_options">
<p><label for="invoice_bank_account_id">Bank account</label><select id="invoice_bank_account_id" name="invoice[bank_account_id]">
<option selected="selected" value="385057" data-currency="GBP">Customer Deposits</option>
<option value="164288" data-currency="GBP">Business Current Account</option>
<option value="327151" data-currency="GBP">Deposit Account</option>
</p>
</div>
</fieldset>
I also tried by referencing the value of the option as well but that didn't work. I'm obviously missing something.
Thanks in advance, this is my first post on the forum.

By simply switching to Chrome this solved the problem. I was using Firefox 52.0.1 (32-bit) and Chrome 56.0.2924.87

Change the value instead:
document.getElementById('invoice_bank_account_id').value = "327151";
// (Deposit Account)

How to have a drop-down menu that updates itself after submission?

Here is my drop-down form. I have searched and still do not understand how to have a selected drop-down value remain after the cart is updated. Maybe it is because of the PHP in the name value? I would greatly appreciate any help. I believe this has to be done with javascript, but again I am unsure.
<select id="quantity" name='.$cart[$x]['ASIN'].'>
<option value=1>1</option>;
<option value=2>2</option>;
<option value=3>3</option>;
</select></td>';
Thanks,
Eric

As I understand it, you want the selected item to remain selected after the form is submitted and the page is refreshed... in this case you will need to do something like this:
<select name='mySelect'>
<option value=1 <?=(isset($_POST['mySelect'])&&$_POST['mySelect']==1?'selected':'')?>>1</option>
Basically for each option you need to check if that select has a value, and if that value matches the current option ... if so, echo 'selected' which will set that option to the current displayed choice.
Unless, you have a situation where you're on like a profile page or something, and you want the user to be able to see his current setting, and still be able to change it... then you would need to do something similar but replace $_POST['mySelect'] with the data from the database. So if you have an array of user data, $data, and one of those values is 'quantity' that corresponds with the select, then you would need:
<option value=1 <?=($data['quantity']==1?'selected':'')?>>1</option>

how to disable an option with msdropdown plugin

Is it possible to disable an option after creating a msDropdown plugin?
I explain my problem better.
I want to put html into each option with icons, text and some other stuff, so first i create an empty select then I add each option with the add function:
dropdown.add({text:$price.html(), value:'normal', className:'normal'});
The problem is that if a certain condition happen I have to disable one option, but there are no way to set an option disabled by using plugin settings.
There is the possibility to make an option disabled only by setting the related parameter disabled=disabled into the select before to call the msDropdown function, but I can't use this solution since I have to put dinamically html into option text.
Is there another way to do it?
Thank you for your help.

I found a solution.
I create my select empty and I fill each option with add function as before, but when that condition happen just do this:
var dropdown = $('select[name="priceType"]').msDropdown().data("dd");
if(credits_error) { // option must be disabled
dropdown.destroy(); // Make it a simple select
$('select[name="priceType"] option').attr('disabled', 'disabled');
dropdown = $('select[name="priceType"]').msDropdown().data("dd");
}
This way first I make it a simple select by calling destroy function, then I set properly the disabled attribute and I create a new msDropdown select.
It works for me, I tested it on IE, FF and Chrome

Yes, it is possibile. It can be done by using the disabled property of the option tag:
<select id="payments" name="payments" style="width:250px;">
<option value="" data-description="Choos your payment gateway">Payment Gateway</option>
<option value="amex" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Amex-56.png" data-description="My life. My card...">Amex</option>
<option value="Discover" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Discover-56.png" data-description="It pays to Discover...">Discover</option>
<option value="Mastercard" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Mastercard-56.png" data-title="For everything else..." data-description="For everything else...">Mastercard</option>
<option value="cash" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png" data-description="Sorry not available..." disabled="true">Cash on devlivery</option>
<option value="Visa" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Visa-56.png" data-description="All you need...">Visa</option>
<option value="Paypal" data-image="http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Paypal-56.png" data-description="Pay and get paid...">Paypal</option>
</select>
The option 'cash' will be disabled.
Here is a working fiddle: http://jsfiddle.net/NKQRj/1/
EDIT
In this second example data are loaded from JSON data using:
$("#payments").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
to fill the elements.
You can define your options as disabled in your JSON data using disabled: true property:
{image:'http://www.marghoobsuleman.com/mywork/jcomponents/image-dropdown/samples/images/msdropdown/icons/Cash-56.png', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
here is a working fiddle: http://jsfiddle.net/NKQRj/3/

How to retrieve empty OPTION value if it's empty?

Considering we have this HTML:
<select id="my_select">
<option value="1">Foo</option>
<option value="2">Bar</option>
<option value="">Bork</option>
<option value="3">Hey!</option>
</select>
The proper way to get the chosen value would be:
var oS = document.getElementById("my_select");
alert(oS.options[oS.selectedIndex].value);
But if the third option, Bork, is chosen, the alert() will show "Bork" and not "" (empty string).
How do I retrieve the empty string?

Firstly, it doesn't. For me, in Chrome and IE8, your example alerts an empty string (jsFiddle).
If, however, there is no value set at all (jsFiddle), Bork is alerted. This is, I think, the issue you're coming up against. This is correct behaviour. As the MDC page says,
If it is not defined, its default value is the text content of the element.
You could, however, use the getAttribute method, which gives null if no elements are selected (jsFiddle).
var oS = document.getElementById("my_select");
alert(oS.options[oS.selectedIndex].getAttribute('value'));

alert(document.getElementById("my_select").value)
returns the empty string, or any defined value of the selected option.
no need to specify options[selectedIndex]
If there is no default selected index, the first option value is returned.
If there is no value attribute for the selected option,
the option's text is returned in a script alert in most browsers,
and is sent to the server (if the select has a name and a form action) in all browsers.