We are using selectize to load some options from some provider php classes, and it works perfectly when creating a new item.
When editing an existing one, we use php to set the value and the text of the element, and then when loading the form, one has to delete the text from the input to be able to see the other options. Is there anyway to see that the value is selected, but when clicking all options show up? The same way as in the creation, you select an option, it is selected, you click on the select, you view all options...
Related
I'm trying to do a automated flow using JS in Power automate, for form filling.
I'm struggling with the dropdowns that are on the website. Inspecting the elements, there is no values in the dropdown available, only when selecting them manually. I tried to run the following line
document.getElementById('type').value="EORI";
document.querySelectorAll('input[Id="type"]')[0].value="EORI";
When running this, it does insert the text EORI in the dropdown, but it isn't being stored, meaning that if I perform an action like save, the field is still marked as empty? Is there some way to add the value without having to change the website structure?
First image is without anything selected in the dropdown and secound image is when EORI is choosen in the dropdown. "EORI" is only the value, the name in the dropdown is "EORI number", not sure if it matters.
I'm very new to scripting stuff, but here's what I'm trying to do. When visiting a webpage, there are two dropdowns available, but the second is disabled until a selection is made in the first. The content of the second populates automatically as soon as something is selected in the first, and each option in the first leads to a unique set of options in the second. I'm attempting to automate selecting items in both. I can set a value in the first using "document.getElementById('firstDropdown').value = 'myValue'", and I can get the label of myValue to appear in the dropdown window, but I can't get the second dropdown to populate because it doesn't realize that I've made a selection since I'm not physically clicking on something. Is there a way to reload or refresh only secondDropdown (not the entire page) so that it realizes I have made a selection for firstDropdown and thus populate?
You can trigger change event of firstDropdown with below code using the Event Constructor.
document.getElementById('firstDropdown').dispatchEvent(new Event('change'));
I’m having trouble with disabling an option in antd with Selects in a Form.
I want to have two Select components working off of the same list of options but without being able to choose the same option on both. To do this, I made a function, renderSelectItems, that gets the value chosen in the first dropdown and disables it for the second dropdown. Additionally, the first option should override the second option, so in the onChange of the first dropdown, if the value will equal the second, it will set the value of the second dropdown to undefined.
However, this isn’t happening. I think the problem is that renderSelectItems is not re-rendered upon the selection of the first dropdown.
I’ve set the dropdowns as dependencies of each other as well as set shouldUpdate to true, but neither are hitting the renderSelectItems call to enforce this disabling.
I’ve recreated this in codesandbox - https://codesandbox.io/s/sleepy-wing-nxpxr?file=/src/App.tsx
I have 10 forms with 5 chosen.js select boxes in each form group. When the page loads I want to load the chosen select boxes with options which have set on another select box, which is hidden from view.
The idea is that the user can deselect the options they don't want, and update the form.
There's a challenge in assigning the correct options to the correct chosen select but what I'm trying to do now is get the already selected options to show.
An example of what it would look like is near the top of the Chosen page. It appears when the page loads 'Sloth Bear' and 'Polar Bear' are already pre-populating their select box.
I've tried chosen:update but my understanding is that it only updates the possible options you can select, not what I'm wanting. I've also tried manually inserting a DOM node into the chosen input, but that wasn't working either.
So is what I'm trying possible? Or is it just an example on the website?
I have a web page with many select boxes, which should each contain the same set of options. The idea is that the user is given a list of items and has to select the matching option for each from another list.
Since the lists are both several hundred items long, loading all the options into each selection box is slow. Also, most of the items are automatically matched to an option to begin with, and the user only needs to skim through and make sure they are correct, so most of the select boxes will never be opened.
What I ideally want is a method of populating the options for each select box only when it is opened. This would mean I could populate the options for the few items which are not matched automatically using onload and only populate the rest as they are needed.
Is it possible to add options to the select boxes as they are opened?
You can try and start with empty selects add the options using the onfocus event and if the select has 0 options add them.
Here is a example