Weird dropdown menu issue in Javascript - javascript

I am having a weird issue regarding the dropdown menu.
I have
company.prototype.buildTable=function(){
var thisObj=this;
tableTD = createElement('td');
tableTD.onclick=function(){thisObj.edit(this);}
this.table.appendChild(tableTD); //append td to the table
// more td
}
company.prototype.edit = function(thisRow) {
$thisRow=$(thisRow);
var menu=document.createElement('select');
menu.className='menu';
//employees is an array containing employee info
for(var i=0; i<employees.length; i++){
var option=document.createElement('option');
option.className='option';
option.innerHTML=employees[i].name;
option.value=employees[i].email;
menu.appendChild(option);
}
$thisRow.append(selectMenu);
}
I can see a dropdown menu in my td. However, when I click the menu, I had to hold my mouse to
keep options open otherwise the options menu will close. Even if I hold my mouse and select one option,
the dropdown menu value wont' change (it still show the first option in the select menu). I hope I explain my issue well.
Can anyone help me with this weird issue?

IIRC, there are some weird cross browser issues with appending options as DOM elements. The preferred way to add options is simply:
menu.options[i] = new Option(employees[i].name, employees[i].email);
EDIT:
Do not to use appendChild on select and do not use innerHTML on select elements. TL;DR: HTMLSelectElement is special and has quirks in IE

Related

Deselect after focus

I am switching between different projects by on change event on select element. I am getting them from DB. But before loading different project i have to store name of previous one.For that i am using on focus event.
How can i then deselect my select element?
document.getElementById("selectProject").selected = false;
is not working.
var whichProjectToSave;
function onFocusSelectProject(){
//for saveJsonF();
whichProjectToSave=document.getElementById("selectProject").value;
}
function callSettingswindow(){
saveJsonF();
canvas.clear();
getJsonF();////////////////////////////////////
document.getElementById("selectProject").selected = false;
}
document.getElementById("selectProject").onchange= callSettingswindow;
To make it clear: How to deselect "select" element after change is performed?
I am not aware of any methods that will let you "de-focus" from an element. But you could focus on any other element - as a result the select element will lose focus.
You could make use of jQuery if you wanted to programmatically focus on the element with next tab index. See this answer for more details.

Using JQLite How to select an item or items in a select box

I'm attempting to highlight 1 or more items in a select box in a unit test. I'm using Karma, Jasmine, and PhantomJS, AngularJS, JQLite, CoffeeScript.
My list has items ["banana", "apple", "orange"].
I tried setting the value directly:
sourceList = element.find('select').eq(1)
sourceList.val("[banana]").triggerHandler('change');
// Or
sourceList.val("banana").triggerHandler('change');
When I get sourceList.val() it's not set.
I tried triggering events to select it. Note I can't do a "click" event because I have another event fire on click.
sourceList.find('option').eq(0).triggerHandler("active");
sourceList.find('option').eq(0).triggerHandler("focus");
sourceList.find('option').eq(0).triggerHandler("drag");
sourceList.find('option').eq(0).triggerHandler("dragLeave");
I tried using the selectedIndex
sourceList.selectedIndex = 1
None of those seem to highlight or select the item. I'm out of ideas. Has anyone accomplished this?
Here is the method of the directive which I am trying to test:
// Clicks on the add button. Should take all items highlighted and move them over
$scope.add = function(){
var sourceList = $element.find('select').eq(1);
angular.forEach(sourceList.val(), function(val, index){
$scope.selected.push({
text: val
});
});
checkListDupes();
};
This code works when I do it manually in the browser but I can't seem to get my test to highlight some items in the select box before clicking the add button. So when this code executes sourceList.val() is equal to [].
A bit late to the party, but I'll leave it here for anyone else with the same problem.
I don't know how you've built the options for the select box but sourceList.val("banana").triggerHandler('change');
should work fine as long as the value of the option is banana. If you haven't specified a track by on the ng-options, the default values that angular creates will be 'string:'+<option label> so sourceList.val('string:banana').triggerHandler('change'); should do the trick.

Dynamically add option with jquery and update html source

I have two listbox, A & B:
when I double click on an item of A , the item will be added in List B. And i have done this. List B visually show the value, but when I go to the view source of the page, I dont see new <option>.
This is my List A options.
This is my List B options (before and after addition and it remains same whatever items added. this is my problem.):
It should have one <option>. like
<option value="VSNR">VSNR</option>
what is my code is :
$('#lstXLSCol').on('dblclick', function () {
var item = $('#lstXLSCol').find(":selected").text();
var newOption = { item: item };
$('option:selected', this).remove();
$.each(newOption, function (val, text) {
if (text != "")
$('#lstXLSSelectedCol').append(new Option(text, val));
});
});
EDIT 1 :
I have found it pressing F12 in IE. but the values are like below:
but, i wanted to insert the value same as text. What should be changed in my jquery code?
you can not see them. The source is just used to build the initial DOM that represents the document. Dynamically created elements are only inserted in the DOM.
But you can analyse such elements with a DOM viewer like Safari’s WebInspector or the Firefox extionsion Firebug. Firefox can also show source code that represents such dynamically created elements by selecting that element an choosing View Selection Source in the context menu.
See this
take out the space between params and :last
$('#lstXLSSelectedCol:last').html('<option value=\''+item+'\'>'+item+'</option><option>');
$('#lstXLSSelectedCol:last').live('change', function () {
var option_selected = $('option:selected', this).val();
$('#lstXLSSelectedCol:last').append($('<option>', {
value: option_selected
}).text(option_selected));
});
You won't see dynamically added elements in the source of your page.
Use your browser's console to inspect the DOM.
Normally it's enough to right click on the element and select "inspect" from the context menu, otherwise see this link for how to access your browser's console.

Hacking select multiple in javascript, flicke

I've hacked html's < select multiple > with javascript, according to my customer's specifications:
clicking an item only toggles that item's selected status.
other selected items stay selected.
The little bit of javascript remembers all selected values.
When the user clicks, only the option he clicks will be selected.
The javascript selects the options he remembers.
However, it causes a flicker effect. I doubt there is any solution for this, but I felt I had to ask just in case, does anyone know of a way to delay the rendering, or any other solution to accomplish this, without a flicker?
Best regards.
EDIT: here is the code
var choices=new Array();
function prepmulti(){
var m=document.querySelectorAll('select');
for(var i=0;i<m.length;i++)
if(m[i].id!=''){
m[i].onclick=toggle;
choices.push(new Array());
}
}
function toggle(){
var sel, x;
for(var i=0; i<this.options.length;i++)
if(this.options[i].selected){
sel=i;
break;
}
if((x=choices[this.id].indexOf(sel))<0)
choices[this.id].push(sel);
else{
choices[this.id].splice(x, 1);
this.options[sel].selected=false;
}
for(i=0;i<choices[this.id].length;i++)
this.options[choices[this.id][i]].selected=true;
}
<body onload='prepmulti();'>
The select multiples have ids 0, 1, 2, etc... If you give them other ids, the code must be modified a little.
The flicker you see is from it changing the selected option(s) then repainting - unfortunately I don't think this is avoidable in most browsers.
In Chrome you can bind onmousedown on the select, use preventDefault and then set the event target's selected to the opposite of what it is.
var m=document.querySelectorAll('select');
for(var i=0;i<m.length;i++)
{
m[i].onmousedown = function(e) {
e.preventDefault();
e.target.selected = !e.target.selected;
};
}
http://jsfiddle.net/VDnQK/
This only works in Chrome, though. IE supports preventDefault for select but e.target returns the select rather than the option element.
FireFox doesn't seem to support preventDefault for select (at least, I can't get it to work).

FIXED: Why is my dynamic SELECT not working in IE9?

I have a script on here that works fine in FF14 and Chrome20.
A part of it is not working in IE9.
If you open the page in IE9 and change the first dropdown (Comprehensive Search) to "Word TM", then the second dropdown will become empty.
In other browsers, the behavior is correct, and it adds two extra lines to the select menu.
Any idea why IE9 does not like this and how to fix it?
Thanks to the comments below, the issue has now been fixed!
You have a SELECT element (z) with id "report_options" and you try to change its options using innerHTML. This is no working in IE9. Use z.options.remove(zeroBasedPosition) to remove options and z.options.add(OPTION) where OPTION is a DOM element created and added by:
var option = document.createElement("OPTION");
option.text = "your text";
option.value = "your value";
z.options.add(option);
The problem is the way you're creating the <option> elements inside the <select>:
z.innerHTML="<option value='no' SELECTED>Not needed</option>...";
Internet Explorer always had problems with <select> elements and the innerHTML (you can only use it to clear all the options, with innerHTML = ""). The only cross-browser way to correctly add options options to a <select> elements is by using its add method.

Categories