How to add new values to a ng2-select dropdown while searching - javascript

I am using ng2-select in a dropdown
ng2-select
On load of the page I have a few items which need to be displayed in the dropdown, then when searching if the values don't exist in the previous items it should add a new item and be able to save it.
I have tried using a typed event and achieved what I want partially I'm able to add a new value to the items list but on tab out or focus out of the textbox the value which we entered is disappearing.
Below is the stack blitz example which I tried.
stackblitz
Is it possible to add a new value on the fly in ng2-select?
Any help is much appreciated.
Thank you.

Related

how to clear state after select menu option changes

So I have the sandbox of code right now which is plotting polyline data based on the option selected the issue is right now from the code i have provided if you run the first one initially then quickly hit the button again to pause it then change the select value to option 2 and run again it seems to plot a line between the two. Where as I want the replayMap to re render itself when the options selected changes so that the data that is going to be plotted is only the data from the current select menu value. So basically cannot figure out how to set nextPosition state or props.activityData back to empty after the user chooses a new select menu option:
code sandbox link: https://codesandbox.io/s/distracted-sun-jwk3dg?file=/src/ReplayMap.js
I have been at this for hours but still cannot seem to find where I am going wrong can anyone that is more experienced in react spot my fault

window.history.go() not loading previous user input for dynamically created dropdown lists

I'm having this issue where I have a table that depending on what option I select for the first column, the next column which contains a drop down, will populate with the appropriate values that users can select.
Here's an example
When the user submits the form, they're brought to a results page and have the option of going back to the first screen (where they select the drop downs etc).
Currently, I'm using the window.history.go() function to go back to the previous pages. However, the dynamically created drop downs aren't retaining the value that the user selects (the option that is at the very top of the drop down is always selected).
I'm currently using PHP for the scripts to generate the tables. Is there a way to fix this? Just need someone to point me in the right direction.
Thank you!
u can use history.pushstate(url+'#idx=x') when dropdown changes. and load the param values into dropdown when page loaded

Multi-select dropdown menu

I am working on creating a website using node.js and express. I want to add a multi-select dropdown box. I have a Javascript object which contains a variety of properties and would like to populate the dropdown box with all the property values. I would also like to be able to add new options to the dropdown and have them visible without having to refresh the page. Is there someway to accomplish this? Perhaps using JQuery? I would appreciate if someone could provide an example.
I've tried this example, but I would like to have a multi select checkbox for the dropdown. The example requires the user to press ctrl while clicking to select multiple options.
Thanks!
$("#select_id").append("<option value='value'>name</option>");

Dynamically loaded items not shown in second time on dropdown (Harvesthq Chosen)

I'm using this following tool to make the dropdown searchable and look nice.
Harvesthq Chosen
First I'm loading the data dynamically in dropdown and applying this code to apply the effect.
$(".chosen-select").chosen();
It works just fine. Everything ok. Then depending on some option I want to empty all data and insert new options. Now problems occur. The newly added options are not shown. Old options are still visible.
So I checked with the firebug. Select tag contains my desired data, but it's showing wrong data(Old ones).Some kind of div is visible. I tried to apply the chosen methd once again. But not working. Then I tried
$("#form_field").trigger("chosen:updated");
And not working either. Can anybody tell me what is missing?
I want to clear and load data dynamically multiple times in dropdown and apply the chosen effect.
This worked for me
$("#form_field").trigger("liszt:updated");

Generating menu with javascript?

I'm trying to make a form where people can add or delete menus and options for those menus in order to generate a menu for a game. I need to be able to grab the value of the form data for each specific menu and the options for that menu, so my current idea is to have a variable put into the id of each menu and then a new variable into the id of each option. Each time they add a menu, that variable increases and each time they add an option for that menu, the variable specific to that menu increases. The problem is that if they add a ton of menus or options and then delete them, the number still increases and I could end up have menus and options with huge gaps between their id values.
Is there a way to do this with arrays? I'm not sure how much sense this is going to make if any, so let me rephrase:
Is there a way to make an array of elements?
I'm having a very hard time just trying to describe what I'm trying to do. Do any of you have AIM or another means of live chat?
Am not sure I understood correctly what that you are trying to do, but if I did this is my solution:
have jQuery .size() run every time someone deletes a menu or option, and then reassign the ID of each element with a .each() loop.
jQuery size() page

Categories