Develop Reference

Vue- How can I control the behavior of chips in v-autocomplete?

I have a 20-25 names coming from API where I'll need to show them in a drop down box (requirement). I'm using Vue v-autocomplete here to display the selected names on the field. I've used custom item called Select All where the user can select all the names in the drop down list, but what I also need to do when the user clicks on Select All is that I don't want to show all the names in the Autocomplete field including Select All Chip. Only items that are selected individually without Select All should show as Chips.
Here is my code sandbox I've attempted so far. I'm new to Vue js, so I'm hoping to get some thoughts on controlling the chips on v-autocomplete.
v-autocomplete sandbox

Instead of including "Select All" in the array of names, you can use the prepend-item slot to include a separate Select All checkbox.
If you need to differentiate between names selected via individual click and those selected via the Select All checkbox you will probably need a new property in the names array to track that, say a boolean that is true if selected one way and false the other.
You'll also need a slot like selection to customize the display of your chips where you can use v-if to conditionally render a chip based on that new boolean property.
This codesandbox I believe is pretty close to what you're after

Display dynamic items on page after initial page load

I am using ASP.Net mvc to render my html view.
The view contains a dropdown list and a label
I load drop down list using a collection in my view model.
Lets say that the collection is called fruit
IList<Fruit> fruit
Fruit is defined as
FruitId
Name
FruitType
The dropdown list will display each Fruit name and have a value of FruitId
When I change the value of the drop down list I want to have the value of my label display FruitType.
I can think of a couple ways of doing this:
Write out Label tags for all values of FruitType. Give a css class to display the first one on load and add javascript to show/hide labels in the select onchange event
Provide json array of Fruit in the html somewhere (I would serialise the Fruit list on page load and put the resulting script on the page somewhere). I would add javascript to the onchnage event of the select to search the json and change the label value accordingly.
I have 2 questions:
Am I missing something obvious, could this be done in a better way?
If no 2 is a good idea, where should I put the json in the html so that the js can use it?

Another approach is that when you generate the dropdown list, include a data-attribute, say data-fruit-type where you store the FruitType, then when the dropdown value changes, just read the data-fruit-type attribute from the selected item.

add new option to select drop down list using jsp

can anyone please suggest , how to add new option to drop down list (using select tag in html) so that user can enter the new value and on submit it should be appended to the existing list ..i am able to populate it's option list via DB dynamically and it's working properly
i am having 5 drop down mutually exclusive category lists in a single table row and i am providing them some initial options.Now i want that if the list contains user's required option then user can select from existing one ...else it should be able to add a new entry to that list & it should be simultaneously updated in DB on submit.

Follow this steps
As you are populating the drop down from databse . So its better to add the value in database only.
I think your user will be entering the value in a text box. So on submit call a method or servlet which can be used to add the value in the database field from which you are populating the drop down.
After updation make your servlet to return on the same page.
Now you can see your new option in the drop down.
Update on further problem explaination
For your problem do one thing
Give a text box in last option of each dropdown.
Select an event in which after the new value entered by user in that text box an java script function can be triggered line onmouseout.
In that function call get the text value .
Now call your servlet or method or whatever you are using to update the db with value value in the column corresponding to that drop down using Ajax or normally.
Refresh the page.

hiii,
finally it's done.
i used following function as-
function abc()
{
var myoption = document.createElement("option"); //works with both mozilla and IE
myoption.text ="mytext";
myoption.id="mytext";
myoption.name="mytext";
myoption.value ="mytext"; //Probably, the sID stuff
document.getElementById("drop_1").options.add(myoption);
}
& so on within loop.
thanks to all .

Grails: How to display data from datasource based on selection in GSP form

I have a pulldown menu generated from a MySQL dataSource.
<g:select onchange="selected()" id="name" name="name" from="${listOfNames()}" noSelection="['':'--']"/>
this populates the menu with one column from my table
Now based on the selection I want to display additional columns from the same table as text on the gsp form.
so user selects Name1 from dropdown. I display underneath the dropdown menu
Name1. age 21. degree yes.
I have an action inside my controller called allDetails that queries all values associate with a name and returns it a string. But I am not sure how to pass it parameters
"${remoteFunction(action:'allDetails', params: \'name=\' params.name')}
What is the best way to do this. run a JavaScript remote function inside selected() or a gsp tag that calls the action somehow? how to then display the returned string? Change the innerHTML?
tried http://www.grails.org/AJAX-Driven+SELECTs+in+GSP

You cannot use remoteFunction or other core Grails tags, because its text is fully generated during page rendering, and you only know the selected name during Javascript executing in onchange.
So use jQuery Ajax call (unless you switched to a different Javascript plugin).
And I suggest that you select not a name, but an id of that person, like in a second g:select example.

drop down list in html form

consider that there are two drop down list in a html form.
The first list named "country" has a list of the countries.
The second list is the "cities" which should be dynamically populated when a country is selected.
How i am supposed to implement this dynamically?
which is the easiest and the simplest possible way to implement this
either in javascript or jquery or ajax?
please help with sample codes and ideas so that i will be able to implement it or some external links or tutorials

Using jQuery, use the change event of the first drop down, then update the second, a little like so
$("#country").change(function(){
//do an ajax request, and update #cities
});

You can do this with pure JavaScript.
Implement an onchange attribute in the first select:
<select id="countires" onchange="makeCitiySelect( );"> .. </select
and in the makeCitiySelect( ) function you can read the value of this select with document.getElementsById( "countries" ).value and send create the new select box with the cities of this country.
If the cities of your countries are in a database on the server you have to send an ajax request and get the cities as response..
But for sure, with jQuery you can solve this problem much better

1.- Create the 2 select boxes
2.- Create an onchange js or jquery function on the first select, so every time it gets selected the other select changes
3.- Inside the onchange function make an ajax call to the service which has the corresponding contents for the selected option.
4.- Retrieve the data and rebuild the second select box with the corresponding data.

Apply a onchange event on your country dropdown (http://api.jquery.com/change/)
Send an ajax request to server and get the city list (http://api.jquery.com/jQuery.ajax/)
On success of ajax request, populate the second list "cities". Remember to remove any already populated cities from the cities list.
Store all the cities list which you got from server into an array. When next time the users selects the same country, use data stored in array to display the cities list. This way you don't have to make multiple ajax request for same country.