Develop Reference

Rails with MaterializeCSS generates "input" in addition to "select", makes dynamic loading impossible

I'm using Rails 5.2.0 with Slim-lang and MaterializeCSS
I'm using javascript to dynamically populate a select dropdown, as shown here.
The code works in the sense that the select element gets populated properly. However, the combo list displayed on screen is not populated! When inspecting the html output in Chrome browser, I found that the "select" is actually comprised of:
<input class="select-dropdown dropdown-trigger" type="text" readonly="true" data-target="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a">
<ul id="select-options-f6b96705-f301-b1b9-c113-84ee91f6897a" class="dropdown-content select-dropdown" tabindex="0" style="">
</ul>
<select id="crit_type" name="crit_type" onchange="loadCritValues(this.value)" tabindex="-1"><option value="Select Criteria">Select Criteria</option>
<option value="age_group">age_group</option>
<option value="gender">gender</option>
<option value="current_country">current_country</option>
<option value="home_country">home_country</option>
<option value="first_language">first_language</option>
</select>
As you can see, the select options are properly populated. But it turns out that the "input" and "ul" elements dictate what gets displayed on screen. And the "ul" is naturally empty.
Is there any way to solve this issue, other than having to also modify the "ul" content?

It turns out that the issue I'm facing with select is linked to MaterializeCSS. The HTML it generates is structured in the format I mentioned as per:
https://materializecss.com/select.html
I can just override that behaviour by assigning 'browser-default' class to the select tag:
select id="crit_type" name="crit_type" onchange="loadCritValues()" class="browser-default" =options_for_select(#crit_types)
This will provide the select tag only without the additional html elements, and allows me to manipulate the select with javascript.

Semantic UI: Dropdown default/placeholder value issue

I'm working on creating a html form using 'Semantic UI' framework. While I'm using a normal select item for a dropdown/select list, I'm styling it using Semantic UI. Everything works fine, but once I select a value from the dropdown, I can't deselect the option/value as an end user.
Suppose in this FIDDLE , if I select 'male', and again want to de-select the option and show the placeholder/default text 'Gender', I'm not able to. Can someone help me figure out a way to make the select work as a regular html select item rather than a dropdown ?
HTML Code
<div class="field">
<label style="width: 250px">Select a Gender</label> <select
name="skills" class="ui fluid dropdown">
<option value="">Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
JavaScript Code
$(".ui.fluid.dropdown").dropdown({})

Try this :
$('select.dropdown').dropdown({placeholder:'Your placeholder'});
see Semantic UI (or Semantic UI CN for a Chinese version) for more info.

In the classic HTML <select> element, it treats your empty valued <option value="">Gender</option> as another dropdown menu item.
However, Semantic UI uses the empty valued <option> as the placeholder text. If you want Gender as a selectable option, it should really be another item that is independent of your placeholder text.
If you want the ability to clear the selection, I think there are better UX paradigms to handle this. For example, you could have an external clear selection button which calls:
$('.ui.fluid.dropdown').dropdown('clear')
Another more streamlined option might be to use the multi-selection dropdown, and limit the maxSelections = 1, the first example from the examples page. That way the user gets an impression that they have selected something, and to clear the selection they use an element within the same dropdown container.

You should know that .dropdown() in Semantic UI removes any null value from your select by default.
Nevertheless, there are some approaches to what you are looking for.
Check this fiddle.

You can achieve this with the snippet below.
<div class="ui selection dropdown">
<input name="gender" type="hidden" value="default">
<i class="dropdown icon"></i>
<div class="text">Default Value</div>
<div class="menu">
<div class="item" data-value="default">Default Value</div>
<div class="item" data-value="0">Value</div>
<div class="item" data-value="1">Another Value</div>
</div>
</div>
You can take a look at here https://semantic-ui.com/modules/dropdown.html#/examples. Also you can use 'clearable'.
If you wanna pass this value to back-end, keep in mind that the selected value is in the input.

$('.ui.dropdown').dropdown({
clearable: true
});

Remove items multi select with optgroup in jquery

Is there a way to clear all option and optgroup HTML elements by using jquery?
My HTML select element is like this,
<select id="users" name="multiselect" multiple="multiple" style="width:382px;" >
<optgroup id="groupadmin" label="Group Admin"></optgroup>
<optgroup id="systemusers" label="System User"></optgroup>
</select>

You can use .empty()
Description: Remove all child nodes of the set of matched elements from the DOM.
Code
$('#users').empty()
Fiddle
EDIT
As you are using multiSelect plugin, You need to use .multiSelect('refresh') method.
$('#users').empty().multiSelect('refresh');
Updated Fiddle

Try this code
$('#users').find('optgroup,option').remove();

Use the following code :
$('#users').children().remove();
This will work irrespective of whether an optgroup is present or not

change value of dropdown menu <select>

If I say have the following element, how do I change the selected value in it dynamically from jquery? (I know there are alot of threads of this subject here and I have tried them but I just coudn't get it to work)
<div class="styledDropDown">
<form name="viewBeds" method="post" action="formhandler.cgi">
<select name="title" onchange="javascript:showHideBeds();">
<option selected value="All">All</option>
<option value="Hannes">Hannes</option>
</select>
</form>
</div>
I want to switch between these values so that the selected value becomes "Hannes" instead of "All".
How is this done easiest?
Trid the following without success
function showHideBeds(){
$('.styledDropDown').val('Hannes');
}
Hope you understood the question =)

You need to set the .val() for the select element, $('.styledDropDown') is a div
This will do
$('.styledDropDown select').val('Hannes');
Demo: Fiddle

You can do
$("select[name='title'][value='Hannes']").attr("selected", "selected");

You can change the current value with
$('#setSelectedOne').click(function(){
$("#title option[value='Hannes']").attr('selected',true);
});
But I do not understand why you would do that with Javascript as the browser has its own do deal with Select boxes...

Mouse over option in select tag

Please suggest me a solution for my problem. I have a html select tag. When i mouse over on any option of select tag, it has to show an image on mouse over. How can i do it??

According to the w3c spec, mouseover event is not supported by the option element.
There is no solution your requirement except to develop a custom drop down control.

OnMouseover event for option works only in firefox and doesnt work in IE.
For IE, either use JQuery or use onMouseover for select tag

You can simply solve your problem using the answer in the question below. There are a two ways of solving mouse events problem with select option on pure JS
Mouse over option in select tag
One of the way - is to make the select element with options in the form of <div> selector with <buttons> or <li> list inside. The introdusing of how it work you can see on my CodePen project-page below:
https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ

You can do some thing like
<select title="This is a select">
<option value="blah blah" onmouseover="window.status=this.value" title="blah blah">item 1</option>
<option value="hello" onmouseover="window.status=this.value" title="hello">item 2</option>
<option value="hi" onmouseover="window.status=this.value" title="hi">item 3</option>
</select>
refer to the mouseover for more