Develop Reference

When click button Selectlist goes default with Javascript

<select asp-for="ProductFilter.BrandId"
asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option>Chose one</option>
</select>
<button type="button" onclick="clearRadioButtons()" class="btn btn-outline-info mt-3">Clear</button>
I have some list items and 1 default item which is "Chose One" and what i want is when i click Clear button just make select list choosen value "Chose One" how can i do this with javascript? Thanks For helping!
For example i got A,B,C,D in options and of course default Chose one and when someone chose C and after click "Clear" button i want to make it "Chose One" back.

Add empty value to the default option and add an id to the select element:
<select id="brand-select" asp-for="ProductFilter.BrandId" asp-items="#(new SelectList(Model.ProductFilter.Brands,"Id","Name"))">
<option value="">Chose one</option>
</select>
Then select default option like this:
function clearRadioButtons() {
var selectElement = document.getElementById("brand-select");
selectElement.value = "";
}

To fulfill your requirements I'll propose two solutions that should (or at least one of them) work for you.
Option 1: Default Form Behavior (let the browser do the trick for you)
For this situation I'd rather use the reset button type of the form element. The button[type="reset"] resets all* the form fields to their original values when the browser loaded the page.
Here's an example, you may choose an option from the list and then click on "Reset" to revert the list to its original state.
<form>
<select>
<option value="" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="reset">Reset</button>
</form>
all:* keep in mind, the button[type="reset"] will try to reset all the form fields to their original values and not only your select element.
Note: in the above example, i intentianally set the option with the text "Choose" as selected using the selected attribute in order for that option to be selected no matter what its position in the select element.
Option 1: JavaScript Workaround
In case the first solution cannot be used, here's a solution that relies on JavaScript to do the trick.
The idea here is to set a default option by specifying an ID for it (so we can easily retrieve it by JavaScript) and an Event Listener on the button that resets the list.
const list = document.getElementById('list'),
defaultOption = document.getElementById('default-option'),
resetBtn = document.getElementById('reset-list');
// listen for "click" events on the "Reset" button
resetBtn.addEventListener('click', e => {
/**
* the below line is required only when you use a link (for example) instead of a button or the button type is different from "[type=button]".
/* The role of that line is to prevent the default behavior of the clicked element. In case of a link, the line prevents the unwanted jump on the page as the browser tries to follow the link and it scrolls the page all the way to the top (or simply follows the link if an "href" attribute is set on the "a" tag).
*/
e.preventDefault();
// reset the list
defaultOption.selected = !0;
});
<select id="list">
<option value="" id="default-option" selected>Choose</option>
<option value="A">A</option>
<option value="B">B</option>
</select>
<button type="button" id="reset-list">Reset</button>
I recommend using the selected attribute on the option you want to be reselected once the "Reset" button is clicked.

How to stop event from firing when hiding element in a change event

I've found a bug when I'm using a keyboard to select from a select drop down, the form containing the drop down is submitted, this only happens on IE. The drop down is in a div and has a JS handler for the change event.
In the handler the div containing the drop down is hidden, this causes a submit event to be triggered on whatever is currently focused on.
The problem can be solved by hiding the div from outside the context of the change event (using a setTimeout) but this doesn't explain why the issue is occurring.
Simplified example (the issue persists if jQuery is not used):
<form>
<div id="container">
<select id="select"></select>
</div>
</form>
$("#select").on('change', function (e) {
e.preventDefault();
$("#container").hide(); <-- this causes the form to be submitted
})
Hiding the div shouldn't cause the form to be submitted, only IE and mobile browsers are showing this issue.
Edit:
This is on IE 11 and Edge, I can get the same issue on 10 and 9 using the IE 11 emulator, I haven't tried lower versions.
More code:
<form>
<div class="selectAddress u-hidden m-form-row m-form-row--full-width" style="display: block;">
<label class="a-label" for="Contact_PolicyHolderAddress_FullAddress">Please select your address</label>
<div class="m-form-row__content">
<span class="a-dropdown">
<select aria-required="true" autocomplete="off" class="a-dropdown__select addressList" id="Contact_PolicyHolderAddress_FullAddress"
name="Contact.PolicyHolderAddress.FullAddress">
<option aria-label="Please select" value="">Please select....</option>
<option>Option 1</option>
<option value="Address not found" class="notFound">Address not found</option>
</select>
<input class="addressList" id="Contact_PolicyHolderAddress_FullAddress" name="Contact.PolicyHolderAddress.FullAddress"
type="hidden" value="">
<span class="a-dropdown__ui"></span>
</span>
</div>
</div>
</form>

try to stop the event propagation :
$("#select").on('change', function (e) {
e.preventDefault();
e.stopPropagation();
})

Two bootstrap-select forms with the same Javascript styling

I'm trying to get two bootstrap-select forms that use the same JS, but don't affect each other (when one is clicked, the other doesn't change). It should be two lists of names of colours, with them appearing in the colours described in all instances (in the list, the first entry seen before clicked, and the entry seen after one is clicked). I have a JSFiddle example which is some of the way there. I want to keep the hover behaviour I have in my example, where the text colour is retained when the mouse hovers over and the background becomes only slightly greyer, unlike the default behaviour where the text goes white and the background goes blue. I realise both of my forms have the same ID of "select" and need to be different, but looking at the top form the way it is now can at least demonstrate the kind of behaviour that I want for both.
As a JSFiddle
HTML
<div class="selectContainer">
<select class="form-control pickerSelectClass" id="select">
<option value="red" style="color:red">Red</option>
<option value="blue" style="color:blue">Blue</option>
</select>
</div>
<div class="selectContainer">
<select class="form-control pickerSelectClass" id="select">
<option value="red" style="color:red">Red</option>
<option value="blue" style="color:blue">Blue</option>
</select>
</div>
JS
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$("#select").selectpicker("refresh");
$('.filter-option').css("color",$('#select').val());
$('#select').on('change', function(){
$('.filter-option').css('color', $(this).val());
});
});

This works. Also make sure that the ids are unique.
$(document).ready(function() {
$(".pickerSelectClass").selectpicker();
$('select').each(function(index, item){
$(this).parent().find('.filter-option').css("color",$(this).val());
}).on('change', function(){
$(this).parent().find('.filter-option').css("color",$(this).val());
});
});

Why is my html dropdown and button not clickable?

I have a select and button here but they are not clickable: http://wp12190683.server-he.ch/webcam/test/
The content is generated dynamically via jQuery in lightgallery. The code generated is
<div class="demand">
<select name="picture" class="form-field">
<option value="baenkli">Bänkli</option>
<option value="bort">Bort</option>
<option value="Toissa">Toissa</option>
<option value="cheminee">Cheminée</option>
</select>
Bild abrufen
</div>
Why is this? Are the elements behind some others or is it not possible to use such elements created dynamically?

The problem is that the .lg-inner element which contains the gallery images is full screen on overlaps this element.
You could set the z-index of the .demand element to 1060 so that it will show above the image. (but it will overlap the image when required)

jquery-select2: selection of multiple options at once with a button

I have a list of users that can be selected (multiple selection is possible). Of course all users can be selected manually, which is excellent.
Further on I have user groups. Most of the times it is required to select only those users of a group. Therefore i would like to have a kind of quickway to add all the users, just by clicking on the a group name.
I'm a big fan of select2, but i wasn't able to get this to work.
I have found that via the .val() function elements could be selected. But these elements are only displayed when another element is selected.
So i need a kind of update function. How can i do this?
I have tried to trigger events (like change) but without success.
Can you help me?
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/css/select2.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.2/js/select2.full.js"></script>
<script type="text/javascript">
$("#id_invited_user").select2({
"placeholder": "Select user",
});
$("#testbuttonclick").on('click',function (clickEvent){
clickEvent.preventDefault();
$("#id_invited_user").val([1,2]);
});
</script>
<select multiple="multiple" class="selectmultiple form-control"
id="id_invited_user" name="invited_user">
<option value="1">Option1</option>
<option value="2">Option2</option>
<option value="3">Option3</option>
<option value="4">Option4</option>
<option value="5">Option5</option>
</select>
<a href="" id="testbuttonclick" >select predefined options</a>

You have all of the right code, except you are missing one important detail.
Whenever you change the value of Select2 (or any other JavaScript component), you should always trigger the change event. This event is nativly triggered by the browser when the value is changed, but it must be manually triggered when the value is changed programmatically.
$("#id_invited_user").trigger("change");
This should always be placed after your call to .val(xyz).