I've the following, very basic code:
<select id="dir">
<option value="N">N</option>
<option value="S">S</option>
<option value="E">E</option>
<option value="W">W</option>
</select>
My system displays HTML using IE. In the displayed page:
On loading the page, the initial value displayed in the field is N.
I click the field. The dropdown menu appears with the N option hovering over the field. The S, E & W options are below the field.
I click S. The dropdown menu disappears, and the value displayed in the field is now S.
I click the field again. The dropdown menu appears with the S option hovering over the field. The N option is above the field, while the E & W options remain below the field.
This is not how I expected dropdown menus to display. How do I change the code such that the entire dropdown menu is below the field whenever it's displayed, neither partially hovering over the field nor above it?
This is the normal behaviour of a dropdown select.
If you want it otherwise you'd have to either build it yourself in javascript/jquery or look for a jquery plugin.
You'd have to remove the select options above the selected one and add them afterwards again. You could use the onchange handler for that.
As said - this is the normal behaviour, even though it isn't expected by you.
Related
I have these three tabs:
When a user uses the mouse and clicks on one of the tabs, (Compliance Notes in this example), the proper element on the tabbed page gets focus and is highlighted appropriately.
However, if the user uses the keyboard and presses the Tab key to highlight the tab they want, and then presses the Enter key to select that tab, the tabbed page gets focus. Then, via JavaScript, I set focus to the proper element on that tabbed page (by using the .focus() method on that element), and the same asp:DropDownList in the example behaves like the user not only selected the element, but clicked on it:
If you then either hit Enter or Tab, manually, the dropdown list closes and the element looks like it did if the user clicked on the tab versus using the keyboard:
So, is there a "simple" way, after I use the .focus() method, to then simulate either an Enter or Tab keystroke so the element will have focus but not have the dropdown list triggered? Or is there another way, using the .focus() method or some other approach, to prevent the dropdown list from being triggered when using the keyboard to navigate the page?
The behavior you are mentioning seems to be related to the keydown event.
Here's an example - when you type in the text field it should set focus on the dropdown. When you press enter in the text field, notice that the first example (using keydown) behaves similarly to what you reported. The second example (using keypress) does not.
document.querySelector('#typeHere').addEventListener("keydown", (e) => {
document.querySelector('#focusMe').focus();
});
document.querySelector('#typeHere2').addEventListener("keypress", (e) => {
document.querySelector('#focusMe2').focus();
});
<select id='focusMe'>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input id='typeHere' >
<br><br>
<select id='focusMe2'>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<input id='typeHere2'>
What I want to achieve is to hide the value from results.
<input list="search-results" value="userText" id="geocoder" autocomplete="off">
<datalist id="search-results">
<option value="userText">Address 1</option>
<option value="userText">Address 2</option>
<option value="userText">Address 3</option>
</datalist>
https://jsfiddle.net/2w6hjgn8/2/
I need to show all option elements in datalist.
Basic datalist function is to filter results by user input. But I want to use it another way.
I am creating live search functionality. If user enter text the search function starts, makes request and get the results. Each result is a separate option in datalist which is added dynamically. Every result includes a field "display_name" which I would like to display. Unfortunately, "display_name" does not always contain the exact text entered by the user. Dataset filters the result and does not show all of them.
My idea is to enter the same value in the value field as user entered - so all results will be displayed.
Unfortunately, dataset displays option's value and innerHTML. Is there any way to hide value?
The label attribute of the option tag allows variation between the displayed text and the option's value on some browsers.
<option value="aaa" label="xxx">
I found that on Firefox the datalist filters by the option's displayed text, whereas on Chrome each option displays and filters by both the label and the value. You can give it a try on your target browsers here: https://jsfiddle.net/Lyjwn0xs/1/
Your goal of filtering by hidden data as opposed to the displayed data doesn't seem to fit the default browser functionality of the datalist element, but you can customize its behavior using JavaScript. MDN has a good example of this on the datalist page under Customizing Datalist Styles.
Hi i am new to angular and html. I am stuck with a small bug where in i have drop down in the html view with option tag inside select tag and i have used ng-repeat to show a dynamic array in that drop down everything works well, i have a condition were there is a text input box above my drop down with a add button so once i click on add button what input i have given in the text box should reflect in the drop down box with a select mark to that particular added input in the drop down if i click on the drop down box.
Here i have used ng-modle to save that input and ng-if to check if there is any input in the ng-model, even this works fine. The problem is when i select a value which is already there in the drop down that particular value is duplicated and added to the drop down with a tick mark.
Here is my sample code:
<select ng-model="newItem.Manufacturer" style="font-size: 15px; padding: 0px 25px;" class="form-control">
<option value="">--Select Category--</option>
<option ng-if="newItem.Manufacturer">{{newItem.Manufacturer}}</option>
<option ng-repeat="abcc in addNewCategory" value={{abcc.Manufacturer}}>{{abcc.Manufacturer | camelCase }}</option>
</select>
addNewCatgory is the varible which hold the entire object.. from that i am taking only the Manufacturer and displaying it in the drop down. newItem.Manufacturer is were i am storing the newly entered value, newItem is already initialised in the controller.js file.
This is two line of code were i push the object to addNewCategory:
$scope.addNewCategory =[];
$scope.addNewCategory = $scope.items.unique('Manufacturer');
I have a page that loads with a dropdown in it with a select dropdown list with an id = "accounts". When the page loads it is already on the Account Orange page. I would like to use JQuery to find the select id element and then force it click on the 3 option which should be index 2.
<select id="accounts" onChange="changeAccount(this.form,this[this.selectedIndex].value)">
<OPTION value="">Select One...</OPTION>
<OPTION value="111">Account Red</OPTION>
<OPTION value="222">Account Yellow</OPTION>
<OPTION value="333">Account Blue</OPTION>
<OPTION value="444" selected>Account Orange</OPTION>
</select>
Something like this works:
jQuery('#accounts>option:eq(2)').prop('selected', true);
Currently when the page loads it does select the correct option despite the "selected" tag but it does not fire it to the OnChange function to select "Account Yellow" and then it would reload the page. That's what I would like it to do.
First, it's better to set the value of the SELECT by value instead of index. Because you might want to add extra OPTION's later (in your source code or dynamically) and then your index count is off.
Second, I find it better practice to change the value of the SELECT, instead of changing HTML attributes/properties which make it selected (e.g. not setting/changing the selected property of the OPTION, but changing the value of the SELECT). Otherwise, you might end up with more than one selected OPTION's which might work, but is not very clean coding.
Third, the suggested >option:eq(2) selector might not work if you're using OPTGROUP's, because then the OPTION is not a direct descendant of SELECT.
So, my suggestion is to use:
jQuery('#accounts').val('222').change();
It selects the right SELECT field, then sets the value to 333 and then fires the onchange event (you need to do that manually in this case).
$('#accounts>option:eq(2)').prop('selected', true).promise().then(function(){
changeAccount(this.form,this[this.selectedIndex].value)
});
Try the following:
jQuery('#accounts>option:eq(2)').prop('selected', true).closest('select').trigger('change');
I'm writing a custom form UI and currently building a select box replacement. The custom select control is basically a div with a hidden (off screen) select input in it, along with a span containing anchor elements mirroring the options of the select input:
<span class="input select">
<span id="select-select1" class="select-input"><span><span>This is the second option <a class="button" href="#"></a></span></span></span>
<span id="select-select1-options" class="select-options">
<a value="1" href="#"><span>This is the first option</span></a>
<a value="2" href="#"><span>This is the second option</span></a>
<a value="3" href="#"><span>This is the third option</span></a>
</span>
<select name="select1" id="select1" tabindex="2">
<option value="1">This is the first option</option>
<option value="2">This is the second option</option>
<option selected="selected" value="3">This is the third option</option>
</select>
</span>
When the user tabs to the field or clicks it, they actually give focus to the hidden select; the parent span then gets highlighted (with the addition of a CSS class) so that they can see which field has focus.
$('.input select').bind('focus', function() {
$(this).closest('.input').addClass('focused');
}).bind('blur', function(e) {
$(this).closest('.input').removeClass('focused');
});
However, here's what's happening:
User clicks the custom select. The span is highlighted to show it has focus, and the option anchors appear.
User clicks an option, and the option anchors are hidden again. But because the clicked option is an anchor, it then receives focus and the main select highlight disappears, when it should stay (because we still want the select to have focus).
So what I'm trying to achieve is that when one of the anchors in the custom select control is clicked, it doesn't fire the blur event on the hidden select input.
What's the best way to do this?
P.S. Sorry if this is a little confusing, it's quite difficult to explain clearly!
I'm actually building a custom selectbox replacement as well as I find all the current solutions to be lacking. You can try e.preventDefault() to see if that cancels the blur event, but my preferred method is to just give focus back to the select if an anchor is clicked, with $(this).closest('input').focus();
Also, is there a reason you are giving focus to the hidden select? You can allow your span to capture focus (and respond to tabbing) by setting its tabindex:
$('.input').attr("tabindex", $('.input select').attr("tabindex") || "0");
And then prevent the hidden input from capturing focus by hiding it fully:
$('.input select').hide();