Prevent style changing of the html select on size changing - javascript

How could I prevent style changing of the html select on size attribute changing?
<svg>
<foreignObject>
<select name="select1" onmousedown="if(this.options.length>5){this.size=5;}" onchange='this.size=1;' onblur="this.size=0;">
<option value="1">This is select number 1</option>
<option value="2">This is select number 2</option>
<option value="3">This is select number 3</option>
<option value="4">This is select number 4</option>
<option value="5">This is select number 5</option>
<option value="6">This is select number 6</option>
<option value="7">This is select number 7</option>
<option value="8">This is select number 8</option>
<option value="9">This is select number 9</option>
<option value="10">This is select number 10</option>
<option value="11">This is select number 11</option>
<option value="12">This is select number 12</option>
</select>
</foreignObject>
</svg>
Here is a fiddle, because for some reasons I can not run the html in the SO fiddle.
What I tried to do is to catch all style changes using the Chrome dev tools, but there are too many of them (changes).
I need to change the size so that to be able put a constraint onto the number of the options visible at once in the select.
In order to avoid a possible x-y problem: I need this to make a scrollable dropdown in svg using the foreignObject and html select.
I would like to be able to select only one option at a time.
According to this question, specifically to the answer:
The behavior depends on the browser and cannot he controlled by the author. You can use the size=10 attribute in the element, but it also changes the menu to a listbox so that 10 options will be visible even when the menu is not focused on. To achieve the behavior you describe, you would need to build your own controls using JavaScript and CSS.
I may tell that my question is about preserving the menu and not changing the style to the listbox style.

Related

how to change the options values of a select tag to a new ones?

I'm creating a converter and i want to change the options values of the select tag according to the units type for example changing the volume units to length units when i click on length button
but i want to do this via javascript so i don't create page for every unit type, i just click on button and the options values change. is it possible ? Here is the select list i made for Area units.
<select name="updropMenu" id="selections_upper">
<option value="acres">Acres</option>
<option value="ares">Ares</option>
<option value="hectares">Hectares</option>
<option value="square_cm">Square.CM</option>
<option value="square_feet">Square feet</option>
<option value="square_inches">Sqaure inches</option>
<option value="square_meters">Square meters</option>
</select>

Dropdown options - select with keyboard shortcuts

I have a web app with columns of data. At the head of each column is a drop down list. The user selects from the options in the drop down to categorize the type of data in the rest of the column. The same drop down option is selected for about 60% of the columns. There are a large number of options in the drop down list (50+) and a requirement to keep the current group order (the option that is used frequently is about 2/3 down the list). This means that the user has to scroll down the list in order to select the same option.
This leads to user frustration as well as the potential for incorrect input as user attention tends to wonder over time.
I'm open to other solutions as well, but I think assigning keyboard shortcuts to a few of the options might make for a better experience and end product. I would envision the user behavior to be something like this:
click on the column drop down.
press "3" to move down to the third group of options
use mouse to make final selection from the group
Currently users can press the key of the first letter of an option and the drop down will move to the next option, however several of the early options in the list have the same first few letters as the option that is chosen 60% of the time (which is well down the list of options), so it's not much help.
Example Code:
<select id="field_run_0_col_3_map_0" data-run="0" data-column="3" data-map="0" class="form-control fieldType" style="min-width:120px;">
<option value="">Ignore</option>
<optgroup label="Group 1">
<option value="option_1">Option 1</option>
<option value="option_2">Option 2</option>
<option value="option_3">Option 3</option>
</optgroup>
<optgroup label="Group 2">
<option value="option_4">Option 4</option>
<option value="option_5">Option 5</option>
<option value="option_6">Option 6</option>
<option value="option_7">Option 7</option>
</optgroup>
<optgroup label="Group 3">
<option value="option_8">Option 8</option>
<option value="option_9">Option 9</option>
<option value="option_10">Option 10</option>
</optgroup>
</select>
I reviewed several other posts regarding binding keyboard input to drop down options, but none of them seem to fit what I am looking for, and most are pretty outdated.
Sending both the value and key of an option box as parameters?
Enter key press event in JavaScript
https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code
Sending both the value and key of an option box as parameters?
JavaScript keyboard shortcuts for web application

Materlialize CSS - Select Componenent - Setting default value with Javascript

I have a tough time with Materialize CSS and Select compoment.
Code goes like this:
<select id="selectCompId">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
When i visit the form i always get either value 1, 2 or 3 based on some DB query. Now, if i get 2 i want to set selected on option number 2 as initial selection. I'm having issues doing so.
Tried doing this:
document.getElementById('selectCompId').value = '2' but it seems like it doesn't work with this materialize component or i'm doing it wrong.
Whole code can be found here:
https://jsfiddle.net/536Lu1xe/1/
Expected result:
Initial value set to desired value (let's say 2 in this case).
Solution -> https://jsfiddle.net/536Lu1xe/2/
At the bottom, under script tags:
var elem = document.querySelector('#selectCompId');
var instances = M.FormSelect.init(elem);
document.querySelector('#selectCompId option[value="2"]').setAttribute('selected', 'selected');
M.FormSelect.init(elem);
If I understand correctly, you want to programmatically select an option in a select box.
In order to do that, we have to select all the options in a select box and select the desired option. The challenge here is to define the option that needs to be selected. In this case, I'm using the index for this.
Let's see how that looks like in code.
let n = 1; // the index of the option that needs to be selected. In this case, we want to select Item 2 (the option at index=1)
// the following line will select the <select/> on the page
const select = document.querySelector('select');
// now we have to loop through all options and select the one at Index=1
select.querySelectorAll('option')[n].selected = true;
<select>
<option value="1">Item 1</option>
<option value="2">Item 2</option>
<option value="3">Item 3</option>
</select>
You need to add selected attribute to select:
<select>
<option value="1">Option 1</option>
<option value="2" selected>Option 2</option>
<option value="3">Option 3</option>
</select>
EDIT:
You'll also need to re-initialize Select after updating the value:
const elem = document.getElementById('select_id');
M.FormSelect.init(elem);

Javascript - Plugin should not affect all select boxes

I use a JQuery/Javascript plugin which changes select boxes with:
$('select').multipleSelect();
The select boxes look like:
<select multiple=\"multiple\">\r\n" +
<option selected=\"selected\" value=\"1\">January</option>
<option value=\"2\">December</option>
<option value=\"3\">December2</option>
</select>
The probem is that it changes all select boxes on the site but it should change one select box only.
How to do it?
Just give the select you want to select, a class, and then call the plugin on it
<select class="selectMe" multiple="multiple">
<option selected="selected" value="1">January</option>
<option value="2">December</option>
<option value="3">December2</option>
</select>
And then in jQuery
$('select.selectMe').multipleSelect();
You need not define an actual class in CSS, though you can, if you want. From now on, just add class selectMe to the <select> that you want the plugin to be called upon.

Adding a custom style to content editor

I have the standard content editor that uses an iFrame as the text area and then onchange of dropdowns it performs:
idContent.document.execCommand(cmd,"",opt);
where "idContent" is the iFrame.
One of the dropdowns is supposed to be style but it performs a "formatBlock" command.
I have a custom style sheet. Is there a way for me to put styles that I've created into this style drop down? If not, I can have another dropdown for these custom styles but what is the command name to set those styles?
Here is the dropdown and javascript that I'm currently using:
<select onchange="cmdExec('formatBlock',this[this.selectedIndex].value);this.selectedIndex=0">
<option selected>Style</option>
<option value="Normal">Normal</option>
<option value="Heading 1">Heading 1</option>
<option value="Heading 2">Heading 2</option>
<option value="Heading 3">Heading 3</option>
<option value="Heading 4">Heading 4</option>
<option value="Heading 5">Heading 5</option>
<option value="Address">Address</option>
<option value="Formatted">Formatted</option>
<option value="Definition Term">Definition Term</option>
</select>
function cmdExec(cmd,opt)
{
idContent.document.execCommand(cmd,"",opt);
idContent.focus();
}
It is possible to link a stylesheet to the document you are currently editing, assuming you have in the iframe a document in designMode. The stylesheet can contain the styles you like that you can apply by altering element CSS classnames or wrapping in an HTML element that has a classname. However you will not be able to apply it using the designMode commands. You'll have to use selections & ranges, and manually change the HTML mark-up to get your desired styling applied.
Read the following article on the general commands that you can apply: https://developer.mozilla.org/en/Midas
The following articles will explain advanced editing techniques using Selections & Ranges:
https://developer.mozilla.org/en/DOM/Selection
https://developer.mozilla.org/en/DOM/range

Categories

Resources