Develop Reference

Bootstrap-select plugin - programmatically trigger click event

How can I trigger on click event programmatically the second option (select TV)?
I use bootstrap-select plugin.
I want to mimic the same behavior as the user clicks on the "TV" option.
my code in this link:
https://jsfiddle.net/xzv9qkwe/
(btw, I tried to write a snippet here but it throws me an exception error when I include CDN of bootstrap-select... but it works fine in jsfiddle link. If you can tell me the reason for it, I will also edit the snippet here).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.14/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<select class="selectpicker" data-style="btn-primary">
<option>Computer</option>
<option>TV</option>
</select>
Bootstrap-select plugin link:
https://developer.snapappointments.com/bootstrap-select/
Thanks.

Instead of listening for a click, listen for a change.
If you want to use the click event, you will need to use something other than a select element.
const output = document.querySelector("#output");
var changeCntr = 0;
document.querySelector(".selectpicker")
.addEventListener("change", e => {
if (e.target.value == "TV") {
changeCntr++;
output.innerText = `Changed to TV ${changeCntr} times`;
}
});
select {
font-size: 1.5em;
}
div {
background-color: lightblue;
min-height: 1.5em;
font-size: 1.5em;
}
<select class="selectpicker" data-style="btn-primary">
<option>Computer</option>
<option>TV</option>
</select>
<div id="output">
</div>

Trying to update the DOM with dropdown select

I want the content displayed to be manipulated by selecting a dropdown option. Here's what I have so far. It doesn't work.
HTML - here's an example of my dropdown.
<select id="dropdown">
<option value="Week1" id="Week1drop">Week 1 - Greetings, Common Adjectives & Planets</option>
</select>
The div below will be hidden by default using {display: none} in CSS.
<div id="week1">
<h1>Greetings, Common Adjectives & Planets</h1>
</div>
JavaScript - Below I've got an event listener to check for a change to the dropdown, which whill call the UpdateDom Function.
The function should be identifying that the user has selected Week1 on the dropdown and using Jquery .show() to make the Div visible.
document.getElementById("dropdown").addEventListener("change", updateDom);
function updateDOM () {
if (document.getElementById('dropdown').value == "Week1") {
$("#week1").show();
}
}
I hope this makes sense, does anyone know where I'm going wrong?

Apart from the typo you found yourself, if you have jQuery, USE it.
Also options do not have IDs
$("#dropdown").on("change", function() {
$("#week1").toggle(this.value == "Week1"); // same as $(this).val()
}).change(); // initialise on load
#week1 {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="dropdown">
<option value="">Please select</option>
<option value="Week1">Week 1 - Greetings, Common Adjectives & Planets</option>
</select>
<div id="week1">
<h1>Greetings, Common Adjectives & Planets</h1>
</div>

How to trigger select change with Materialize

On a normal select tag I'm able to trigger a change event with jQuery using $('select').val(2).change(). This does not work with Materialize select tags.
$(document).ready(function() {
$('select').formSelect();
$('button').on('click', function() {
//$('select').val(Math.floor(Math.random() * 3) + 1).change(); // Does not work
$('select').val(Math.floor(Math.random() * 3) + 1).formSelect();
});
});
.wrapper {
display: flex;
justify-content: space-around;
padding: 2rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<div class="wrapper">
<select>
<option value="">Selecione</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<button class="btn">Change</button>
</div>
I was able to make this work using $('select').val(2).formSelect() but I don't know if this is the correct way as this function is used to initialize the selects on Materialize and I haven't found documentation about it. Is this the "correct" way to achieve this or there are better solutions?
Thank you.

I think its the correct way, you will have to re-initialise the select element after changing its value
If you want to update the items inside the select, just rerun the initialization code from above after editing the original select. Or you can destroy the material select with this function below, and create a new select altogether Materializecss Docs
var select = $('select');
// initialize
select.formSelect();
$('button').on('click', function() {
// change
select.val(2);
// re-initialize material
select.formSelect();
});

var select = $("select#TeamListId");
// initialize
select.formSelect();
console.log(select);
$(select).on("change", function(e) {
teamNameId = $(this).val();
console.log("\n\nteamNameId", teamNameId);
myTable.search(teamNameId).draw();
});

Show a div on option selection

I have a selection menu (drop down list).
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
& the following div which located in somewhere in my page.
<div id="somediv">This is a string.</div>
I want to display the above div upon selecting the second item of the menu (id="two").
I have 2 questions: (1) What is the best way to keep this div hidden by default? I will just add display:none; to its styling, but maybe there is a better solution? (2) How can I make the div show up when the option of id="two" is selected? Any answer would be greatly appreciated.

So I wrote a simple jquery script that does what you described. Let me know if it fixes your problem. You can also do this with javascript, but I think jquery works for this just fine.
http://codepen.io/Francisco104/pen/vEPRgp
$('select').change(function(){
decide($(this));
});
var decide = function (elem) {
var touch = elem;
if (touch.val() === 'anything') {
return $('#somediv').css('display', 'block');
}
};

For hiding it by default, using style="display: none"is the easiest. You could do it using jquery $('div#somediv').hide(); but I don't see any benefit to that other than you possibly wanting to keep the show/hide logic together.
Here are two simple solutions using a change() event.
If div#somediv should be shown permanently when option#two has been selected:
$("select").change(function() {
if ($(this).val() == 'anything') $('div#somediv').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>
If div#somediv should be shown while option#two is selected and disappear if the user selects another option:
$("select").change(function() {
$('div#somediv').toggle($(this).val() == 'anything');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv" style="display: none">This is a string.</div>
You should probably give an id to the select as well, to make the jQuery selector less brittle.

So, I'd have a class for the div, let's say, is-hidden and my CSS will have .is-hidden { display: none; }. Then, do the following.
HTML:
<div id="somediv" class="is-hidden">This is a string.</div>
JS:
$div = $("#somediv");
$("select").on("change", function() {
$div.is(".is-hidden") || $div.addClass("is-hidden");
//Option 1
if ($(this).find(":selected")[0].id === "two") {
$div.removeClass("is-hidden");
}
//Option 2 (same as above, but a bit shorter)
$(this).find(":selected")[0].id === "two" && $div.removeClass("is-hidden");
});

Here is what you can do:
in your html file:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<select>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
You'll need to import the JQuery library (which I show you there right above the <select> element) so that you can execute your script.
In your css file:
#somediv {
display: none;
}
and finally here is the script that will show the dive when "plane" is selected
$('select').change(function(){
$('#somediv').css('display','block');
});
Take a look at this JSFIDDLE I made for you.

1) You can hide the div initially giving the css property display:none; or by setting its display property using javascript which will run in initial load.
2) You can listen to the onchange event of the selectfield and check if value is 'anything' then show the div by changing its display style property to block and hidden in other cases.
document.getElementById("somediv").style.display='none';
var showHideDiv=function(selectField){
var divElement=document.getElementById("somediv");
if (selectField.value=='anything')
divElement.style.display='block';
else
divElement.style.display='none';
}
<select onchange='showHideDiv(this)'>
<option id="one" value="something">Car</option>
<option id="two" value="anything">Plane</option>
</select>
<div id="somediv">This is a string.</div>

The simplest way to hide within HTML
<div hidden>content</div>
To display an hidden div
$(document).ready(function(){
$("select").change(function () {
$( "select option:selected").each(function(){
if($(this).attr("value")=="anything"){
$("#somediv").show();
}
});.
});

Display none works.
Have you tried keying into the onchange event? http://www.w3schools.com/jsref/event_onchange.asp?

select optgroup with jquery selector stops working after first selection

I'm getting very wierd behavior when I empty a div then append another div to it using selected based on selected option. Hard to explain. When you select and option it works, but when you come back and select the same optiongroup again, it stops working completely. Please have a look at his example: http://jsbin.com/akeboz/3/
It's probably me doing it tha wrong way again :P but what do you think is wrong with it?
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<style>
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
</style>
<script>
$(document).ready(function(){
$('#carSelect').change(function(){
currentBrand = $(this).find('option:selected').data('brand');
$('#carContainer').empty();
$('#car_'+currentBrand).show().appendTo('#carContainer');
});
});
</script>
</head>
<body>
<form>
<select id="carSelect">
<optgroup label="Swedish Cars">
<option data-brand='volvo' value="volvo">Volvo</option>
<option data-brand='saab' value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option data-brand='mercedes' value="mercedes">Mercedes</option>
<option data-brand='audi' value="audi">Audi</option>
</optgroup>
</select>
<div id="carContainer"></div>
</form>
<div style="display:none;">
<div id="car_audi">
audi stuff
</div>
<div id="car_mercedes">
mercedes stuff
</div>
</div>
</body>
</html>

You're appending, but then destroying what you appended when something else is selected, so there's no way to get it back.
You want to make a clone of it, and append the clone.
$('#car_'+currentBrand).clone().show().appendTo('#carContainer');
Also, the .show() isn't needed because it is their parent that is hidden, not the elements themselves.
Ultimately, I think it would be better to have the content nested in each car type, and put it back when you're done with it (before grabbing the new content).
That way you're not constantly destroying and rebuilding DOM elements.
Like this:
<div style="display:none;">
<div id="car_audi">
<div>audi stuff</div>
</div>
<div id="car_mercedes">
<div>mercedes stuff</div>
</div>
</div>
Then this:
var currentBrand;
var container = $('#carContainer');
$('#carSelect').change(function(){
if( container.children().length ) {
if( currentBrand ) {
container.children().appendTo( '#car_'+currentBrand );
} else {
container.empty();
}
}
currentBrand = $(this).find('option:selected').data('brand');
container.append($('#car_'+currentBrand).children());
});

When you make your call to empty() you are removing your original div, your code would work if you did this -
$('#car_'+currentBrand).clone().show().appendTo('#carContainer');
That will clone the div before it copies it, and then the clone of the div will be deleted on the empty() call rather than the original div.