I am trying to see if there is a way to have Select2 search a data-attr as well as the value instead of the option text alone.
For example - state drop menu has state abbreviations. Easy to search "ND" and the select menu filters to ND. However if the user types in Dakota in the search field, then both ND and SD would appear. In some cases, the search terms may be multiple items like "North America" or "Mid West" and the states tagged that can also appear.
<select id="state">
<option data-search-term="North Dakota, Mid West, Region 1" value="ND">ND</option>
<option data-search-term="South Dakota, Mid West" value="SD">SD</option>
</select>
This example is very simple and I am not using a states drop menu, just easier to explain it this way. Any feed back would be greatly appreciated. I tried working with the matcher aspect shown but couldn't figure it out. https://select2.org/searching
Related
I have a page that shows a list of students. I want to use a dropdown to implement a filter. When option 1 (high school students) is selected shows only high school students, when option 2 is selected (college students) is selected shows only college students and so on.
The query will be:
SELECT firstName, lastName, age
FROM students
WHERE studentCategory = #dropDownValue#
Is there any way to do this without using javascript nor any submit button. I am trying to pass the dropdown value to the URL but I am not sure how to change the URL when an option is selected from dropdown.
I appreciate any help.
To answer your question, you add onChange to the first SELECT.
<select
name="doesntmatter"
onChange="document.location.href='?studentCategory='+this.value;">
However consider using ajax as it will be much faster.
I've been trying to find some information on how to do this and I'm beginning to think that it is impossible. I'd like some input from others before I give up the idea completely.
I have dropdown select on my form that allows the user to select which group they want to sign up for.
<select name="group[3893]" class="form-control" id="mce-group[3893]">
<option value="">What would you like to hear about?</option>
<option value="1">Zumba</option>
<option value="2">Pilates</option>
<option value="">All Classes</option>
</select>
I have no idea what value to assign to the All Classes option. Is it possible to sign the user up to both groups?
I think that the only way around this is to create a third group called All Classes and subscribe them to that.
There are two approaches that will work, and which one is best depends on your use case. The differentiating point is what happens to someone who chooses "all classes" when a new type of class is offered? Let's say John subscribes and clicks "all classes". A few months later you add barre classes to your selection. Should John receive those emails?
If so: you'll want to create an "all classes" group. This is how MailChimp themselves handle this.
If not: you'd probably want to use javascript to make selecting "all classes" check all of the interest groups before the form submission.
I'm working on a script with mechanize in Ruby. I'm trying to select the values of the form(dropdown), however the values for the second field of the form don't appear until the first field has a selection. It prevents the following -
my_form[0].options[2].select
my_form[1].options[2].select
my_form[2].options[2].select
my_form[3].options[0].select
because the second field doesn't have any value at this point. The selection of the first part works like it should, however.
The line in the form looks like this
<select id="DistrictId" name="DistrictId"><option value="">---SELECT---</option>
<option value="3">Alaska Gateway School District</option>
...
</select>
<input type="button" id="selectDistrict" value="SELECT">
I see there is a Select button after the field, however I'm not sure on how to click it and have the second field populate.
When I use the following
my_form.button_with(:value => "SELECT").click
I don't get an error, but it also doesn't repopulate the second field. I tried placing that line after the selection of the first field, and it gets me no further.
I haven't seen anything that is super helpful with dropdown menus.
Use a Login form with Mechanize was helpful in dealing with the form, but didn't help with actually selecting that button.
The other thing that I need this to do is to loop though all of the options in the drop down menus.
I've been able to find some things about dropdowns and python, which has also helped.
I can select the part with the
.options[x]
But I am unsure as to how to know when to end the looping. It looks like the elements are stored as an array, and so I can just do .each do on the forms. http://crabonature.pl/posts/23-automation-with-mechanize-and-ruby was helpful for going through the form, but it all comes back to having to select the top form value before being able to see the values in the fields under it.
After looking at this answer from #Oleg, I would like to know how we can update the filter toolbar after a search has been performed.
For example:
In Oleg's example, if you select the Sport option from the Category dropdown, the Subcategory dropdown still has Football, Formula 1, Mathematics and Physics as options even though they are not shown in the grid after the search.
How can we update that code so that, for example, when I select Sport from the Category dropdown, the filter toolbar is updated so that the dropdowns only have options from the new set of data after the search?
I've been trying to "refresh" or "update" the filter toolbar after a search has been performed, but I can't figure out how to do this.
What you mean is dependent selects. I posted the answer with the demo which demonstrates the solution. I plan to implement soon new feature in free jqGrid (it's my fork of jqGrid) the possibility to refresh the options of select. It will make the implementation of dependent select much more simple. Currently one have to refill all options manually.
I have a list of items in a dropdownlist. Each item contains 3 properties. The name, the acronym, and the Id. I'm currently using the name and Id which works perfectly fine.
As the list is long, it's typical for a user to open the dropdownlist and start typing to find the item they are after. Our users like to search/type the acronym, not the full name. So because we only show the full name in the dropdown text, typing the acronym usually does not get you to the correct item.
How can I display the full name, but type-ahead on the acronym?
Here's the dropdown, pretty standard.
<select kendo-drop-down-list style="width: 500px"
class="ade-header-organization-list"
k-data-text-field="'organizationName'"
k-data-value-field="'organizationId'"
ng-model="orgSelection"
k-data-source="orgData">
</select>
The data looks like this (on a per record basis):
{ organizationId: 1,
organizationName: "Society of Kelvin-based Athletes in Tundra Environments",
orgAcronym: "SKATE"
}
I want to be able to typeahead the word "SKATE" and have it jump to the correct item.
Note that I'm using angular here, but the behavior isn't angular specific.