Semantic UI multiple select dropdown - close event - javascript

I am trying to get the values selected in a multiple select dropdown - just once, because I am populating a cascading dropdown depending on the selected values in the original dropdown, and don't want to get data every time the user selects one value from the multiple select. Ideally I want to get the values after closing down the dropdown by clicking out of the dropdown or on the down arrow on the dropdown.
Does anyone know if there is an event for this? After searching online, I tried onClose, but that apparently is for React only, and also is not in the documentation (https://semantic-ui.com/modules/dropdown.html).

I have been looking for an answer since posting the question, and yes, I found a solution.
Using onHide, the values can be captured just once.
$('#ddlMultiple').dropdown(
{
onHide : function () {
//get the selected values here
}
}
);

Related

Trying to add functionality to select option

In my program the user first enters some data to filter and the result goes to one dropdown select menu lets call this functionality function_1 . If there is only one result the it goes to make another query, lets call this function_2.
My problem here is when i have 2 or more results i should be able to:
1) check out the different options i get by clicking on the select to display all the options with a scrollbar if needed
2) After he saw the options there he clicks on one of them to activate function_2
The usual answers use the "change" event but, wont work if the user picks first default value because there is no change, he would have to pick an undesired result and go back to the first.
Using the click event on the select makes also unnecessary work because it triggers twice (one when i open the dropdown, other when option is selected)
Main problem here i think is the jquery selector, but im not sure if it can be done just with that.
This is an example of what im trying:
// function_1 in ajax
.done(result){
$.each(result.data,function (){
$('#select_ex').append("<option value...... ></option>");
if (result.count()===1){
$('#select_ex').trigger('change');
}
});
}
$('#select_ex option').change(function(){// tried with change, click or focus
function_2();
}
The html contains
<select name="select_ex" id="select_ex" size="0" ></select>
EDIT:
Not related to the duplicate question mentioned, since i already know why it doesnt select the option, besides it doesnt apply either since it only talks about connectors with ID, which is not even the point here (I could do my thing without IDs). Im asking for funcionality similar to ":selected" but with option->click.
Another workaround i thought of is filling the select with an empty/hidden field and set the selected property it, filtering afterwards and using the regular change event... but then the first item would be blank and doesn't seem very logic to me.
So I came to seek for any fresh ideas.
EDIT2
I added a white option for the multiple result and erased it afterwards by adding this line of code to imvain2 solution (where needed)
$("#select_ex option[value='0']").each(function() {$(this).remove();});
Although fixing your change function so that is is called for the select and not the option is important, your problem is the default selected option itself. As you mentioned, if they want the first option, they have to select something else to trigger the change function.
I would recommend adding a "blank" option as the first option and setting it as selected.
var $select_ex = $("#select_ex");
.done(result){
$select_ex.empty().append("<option value='0'>Select Your Ex Below!</option>");
$.each(result.data,function (){
$select_ex.append("<option value...... ></option>");
});
$select_ex.val("0");
}
$select_ex.change(function_2);

Javascript/jQuery Dropdown menu update

I have two dropdown menus - when I select an option on the first I want the other to change to its corresponding option based on its matching value. I am currently using this JS code:
document.getElementById("select_1").onchange = function() {
console.log("select_1", this.options[this.selectedIndex]);
document.getElementById("select_75").value = this.options[this.selectedIndex].getAttribute("value");
};
However the end result does not change/update correctly unless I change manually the second (select_75) dropdown to another option and then back to the changed option (set by select_1).
Are there any changes I could make to the code or other setup entirely to try out in order make this happen? Open to using jQuery as well.

How can I show a hidden DIV for a selection included with others?

I have a javascript file that when called, checks to see if a particular option is selected on a form. The form allows for multiple selections before being submitted. When a particular item is selected within the given choices it shows a hidden menu. In this case with "audits" I am able to show the hidden menu fine when just "audits" is selected from the list. However, I'm having much difficulty in figuring out how to get the menu to show when "audits" would be selected/highlighted with others. Eg: I had audits, services, someotheroption
Below you can see the code I'm currently using and that's working only when the single item is selected. Any guidance would be much appreciated.
function toggleFields(){
function toggleFields(){
if ($("#installations").val() == "audits"){
$("#dbcredentialsfield").show();
}
else
$("#dbcredentialsfield").hide();
}
Using the code you have so far, I assume you probably want something like this:
$('#installations').on('change', function(){
$("#dbcredentialsfield").toggle($(this).val() == 'audits');
});
This says; when the select element (assuming your dropdown has the id of installations) changes, toggle the visibility of the element with id dbcredentialsfield depending on if the value of the select is audits or not.

How to manually focus/highlight an item in jQuery UI Autocomplete?

I am using jQuery UI 1.10.2 and I would like to manually highlight/focus an item in the list. Basically, I am trying to achieve a HTML select-like behavior:
All the results from source should always be shown
When typing in the inout field, the best match should be highlighted, the list should NOT be filtered
When the user selects an item, the suggestion list is closed. When the user focuses on the input, the suggestion list should be opened and the selected value should be highlighted.
I can successfully open the suggestion list on input focus and not filter the result list, but I am having a bit of hard time figuring out how to manually highlight/focus the selected element when autocomplete suggestion list is opened and while typing - I am able to find the matching item, but don't know how to "activate" it.
I have tried this:
open: function() {
// Find the selected menu item...
var $menuEl = ...
$(this).data("uiAutocomplete").menu.focus(new $.Event("mouseover"), $menuEl );
}
But it doesn't seem to work.
It seems that passing null instead of an event makes it work:
$(this).data("uiAutocomplete").menu.focus(null, $menuEl );
FWIW: I created the Event because an older version of jQuery UI Menu required it. It seems that the UI Menu has changed considerably since then.

YUI Custom Event for Dropdown value pre-selection?

I have a dropdown field and its value is pre-selected as soon as its rendered (Say, its a Country field in a signup form). And I have other dropdowns or other components which change the selected value of the first dropdown dynamically. Now I want to fire a method with every "value getting selected" in the dropdown. Is it possible?
To put my question in much more clearer way, I want to create a onDefaultValueSet event and subscribe the first dropdown to it. So in which ever way the dropdown gets any value selected, the corresponding handler (my function) gets called.
I tried to do it with YUI Custom Events, but I am not sure how the browser will be calling(understanding) my handler every time a value is selected in the dropdown.
onSelect (from Default DOM) is not a right answer I guess, as I tried it.
Please help me in tackling this problem.
I am not sure whether this is an answer, but I've found a workaround. Please validate this.
So I was making a item "selected" using javascript-dom manipulation. Meaning, using
domElement.options[5].selected = True;
So with the (YUI)custom event I created, I started calling "fire()" right after this. So the code becomes:
domElement.options[5].selected = True;
onDefaultValueSetEvent.fire(domElement.name);
But I am not sure, what if the particular option is selected in a gui fashion. Meaning, how automatically fire() method is called

Categories