I have a select that has dynamically created option option[0] always ends up being autofocused making my onchange not work if I want to choose the first option.
The index of the options matter so creating a " " option won't work.
Any ideas?
edit: The user creates an object. When the user saves the object, it creates a new option in the select tag. The user selects something from the select tag to go back to that object.
The autofocus is always on option[0] until they selected something else even if they created a new object/option so if they wanted to pick the first thing, but was on the second or third the user would have to click on another option first then click on the one they want.
What I want is that it doesn't focus on any of the options so that they could click on option[0] from the beginning regardless of whether they've selected anything from the dropdown.
Seems like a lot of work to workaround this issue, instead of changing one of your requirements. You say that the index corresponds to an index into an array of objects. Why can't you have the first option blank or "Select...", and then simply subtract one for your lookup into the array?
Or, have the values correspond to the array index, or use custom data attributes to store the array indexes? Seems like any of these would be easier than trying to force a consistent behavior for an unsupported functionality across multiple browsers.
A Select box always has one of its options selected (unless it doesn't have any options). You might need to use a different event (onclick, perhaps) and test the value to see if it has changed.
You can add a default empty selected option with:
<option selected="selected" disabled="disabled" hidden="hidden" value=""></option>
The select is empty by default, with the void option not selectable in the options list.
Related
I will try to explain shortly. I have this:
I am using AntDesign library with React, and these are not regular inputs, but Autocomplete dropdowns, when i focus on one of them it gives me a list of options to choose. So first i have to choose first dropdown value and after that i will get options in next one to choose, then i choose second and after that i get options for third and so on. So it is something like a chain, you must select all previous dropdowns to be able to get options and select current.
This is what i get from backend.
The normal thing would be that i get values for first dropdown and after i select value i call endpoint again which will return options for second one and so on. But no, i get all possible combination of values in one array, and now i have to filter that one big array each time i select value in one of the dropdowns, to get values for next one, so for the SCOPE for instance, i have to filter array depending on 3 selected previous values and so on for the others.
Last two fields are not important for this problem.
So, i need help how to filter these values in the easiest way. And to use Form.Item and Autocomplete from AntDesign.
I have two dropdowns on a page. When a button is clicked I need a new option to be added to both dropdowns (same option to be added to both). The option values are stored in an array, I first create a new option element new_option and set its value/text from the array, and then the option gets added to the dropdown with dropdown1_name.options.add(new_option) and dropdown2_name.options.add(new_option).
But in practice, the new option gets added only to the second dropdown I add it to but not the first, i.e. if I do dropdown2.add followed by dropdown1.add then only dropdown1 gets the new option.
It is easy to fix this by creating a replica of the new option element from scratch, and adding one copy to each dropdown. But that doesn't make sense to me so the point of this question is I would really like to understand what causes this behavior in the first place. Why can't the same newly created option be added to both dropdowns??
This fiddle I just made has a test setup.
The problem is you are adding the same <option> instance to both dropdowns:
dropdown2.options.add(el1);
dropdown1.options.add(el1);
// ^^^ notice "el1" twice
Instead, you have to add el2 to dropdown2:
dropdown2.options.add(el2);
dropdown1.options.add(el1);
I hope this helps you :)
I need help with the following scenario:
I use a single-select dropdowns in a table. Each row has its own dropdown.
Now there are 2 options for changing the selection:
Click on deselect ('x') icon (works ok - via ng-change).
Open the dropdown, choose another value from list. Override the previous value (although ng-change fires, I have no way to know if it's a new value or a overriding value).
I wish to disable the second behavior. Is it possible to 'tell' chosen that once a value was selected, the only way to re-select a new value is to click on 'x'?
e.g: once a value was selected, disable the dropdown, hide the 'arrow' icon, but keep the 'x' deselect icon active?
<select chosen
allow-single-deselect="true"
placeholder-text-single="'Select'
ng-model="row.userSelection"
ng-options="field as field.name for field in vm.fields">
<option value=""></option>
</select>
Thanks.
Add an ng-disabled="$ctrl.model" will disable the select until the "x" clears the $ctrl.model. Once cleared the select will be Reenabled and a new selection can be made.
The only thing I can think of after taking a quick look, is to convert from ng-options to and use ng-disabled on the actual option element. The documentation says that you can hide disabled options, so if for example you were to select OPTION1 and OPTION[2-4] were disabled, they would be removed from the list.
I found a plunker with version 1.0 but it doesn't work. Making options distabled still shows them in the list, although it makes them undefined when you select them. Maybe a newer version is updated to actually remove them.
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);
I have a custom option set on an Opportunity form and one of the option (last) is hidden. I've have a ribbon button & on click of that button I need to show and select that option. It's working fine for the first time but my problem is if I click on that button for 2nd or 3rd time and so on it's duplicating/adding the same text part of that option to that option set...Option Set
You can avoid manually checking for the option by simply call ctrl.removeOption(1234) before calling ctrl.addOption(1234).
You should check to see if the option exists prior to adding the option to the option set. As there is no supported way to check the current options of an option set (Xrm.Page.getAttribute(attributeName).getOptions() gives you all available options, not the options currently on the page for the attribute).
So, your best bet would be to use Xrm.Page.getControl(attributeName).clearOptions(), to clear all the options and then re-add the ones necessary. You can get all available by interating through Xrm.Page.getAttribute(attributeName).getOptions();
Before you remove the option (to add it again without duplicates) you should first check if the value to remove is not the current value --> if the actual value is the value you want to remove a update on the option set is fired - it is like you setting the field to null.