Develop Reference

JS should select the second option where we have used selected="selected"

<select class="some_flex_select">
<option value="con_1">One</option>
<option value="con_2" selected="selected">Two</option>
<option value="con_3">Three</option>
</select>
JS →
select.addEventListener('change', function (event) {
if (event.target.value === 'con_2') {
classTwo.classList.add('class_2')
}else if (event.target.value === 'con_3') {
classTwo.classList.add('class_3')
}else if (event.target.value === 'con_1') {
classTwo.classList.remove('class_3', 'class_2')
}
})
// Do the check initially...
checkSelect()
// ... and on change events
select.addEventListener('change', checkSelect)
My expectations are that the default is con_2, and the JS should implement that class by default, but that is not happening.

This will work. I have tested this here →
https://codepen.io/codeispoetry/pen/jKzqrx
var select = document.querySelector('select') // use more specific selector here
var classTwo = document.querySelector('.flex_parent')
function checkSelect () {
if (select.value === 'con_2') {
classTwo.classList.add('flex_parent_2')
}else if (select.value === 'con_3') {
classTwo.classList.add('flex_parent_3')
}else if (select.value === 'con_1') {
classTwo.classList.remove('flex_parent_3', 'flex_parent_2')
}
}
checkSelect();
select.addEventListener('change', checkSelect)
.flex_parent {color: blue; font-size: 25px; font-weight: bold}
.flex_parent_2 {color: red; font-size: 25px;}
.flex_parent_3 {color: green; font-size: 25px;}
<select class="video_home_flex_select">
<option value="con_1">Blue </option>
<option value="con_2" selected="selected">Red</option>
<option value="con_3">Green</option>
</select>
<div class="flex_parent">
Hey I am changing color!
</div>

Try This:-
$('select').on('change', function() {
if (this.value === 'con_2') {
classTwo.classList.add('class_2')
}else if (this.value === 'con_3') {
classTwo.classList.add('class_3')
}else if (this.value === 'con_1') {
classTwo.classList.remove('class_3', 'class_2')
}
alert( this.value );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="video_home_flex_select">
<option value="con_1">One</option>
<option value="con_2" selected="selected">Two</option>
<option value="con_3">Three</option>
</select>

<select class="some_flex_select" onchange="checkSelect(this.value)">
<option id="con_1" value="con_1">One</option>
<option id="con_2" value="con_2" >Two</option>
<option id="con_3" value="con_3">Three</option>
</select>
<script type="text/javascript">
var defult_id='con_2';
document.getElementById(defult_id).selected = "true";
function checkSelect(selected){
if (selected === 'con_2') {
//add class
//classTwo.classList.add('class_2');
}else if (selected === 'con_3') {
//classTwo.classList.add('class_3');
}else if (selected === 'con_1') {
//classTwo.classList.remove('class_3', 'class_2');
}
}
</script>

Here's what you're looking for-
myselect = document.getElementById("myselect");
function checkSelect(event) {
var option = myselect.options[myselect.selectedIndex].value;
switch (option) {
case "con_2":
alert("con_2 selected");
//classTwo.classList.add('class_2');
break;
case "con_3":
alert("con_3 selected");
//classTwo.classList.add('class_3');
break;
case "con_1":
alert("con_1 selected");
//classTwo.classList.remove('class_3', 'class_2');
break;
default:
break;
}
}
// Do the check initially...
checkSelect()
// ... and on change events
myselect.addEventListener('change', checkSelect)
<select id="myselect" class="video_home_flex_select">
<option value="con_1">One</option>
<option value="con_2" selected>Two</option>
<option value="con_3">Three</option>
</select>

Hide the first dropdown selected text from second dropdown

I need to change the based on the text, not value because values are different. So can please anyone help me.
$("#primary_supplier").change(function () {
var selectedText = $(this).find("option:selected").text();
var selectedValue = $(this).text();
var optionValues = [];
$('#secondary_supplier option').each(function () {
optionValues.push($(this).text());
});
optionValues.toString();
console.log(optionValues);
if ($.inArray(selectedText, optionValues) != '-1') {
var others = $("#secondary_supplier option[value=" + selectedText + "]");
$("#secondary_supplier option[selectedText]").css("display", "none");
$("#secondary_supplier :not(option[value=" + selectedText + "])").css("display", "block");
}
});

This may help you
$(function() {
$("#primary_supplier").change(function() {
loadSecondDropdown(this);
});
});
function loadSecondDropdown(ele){
var sele=$('option:selected', ele).text();
$("#secondary_supplier").val('default');
$('#secondary_supplier option').show();
$('#secondary_supplier option').each(function () {
if(sele==$(this).text()){
$(this).hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Primary
</label>
<select id="primary_supplier" name="projectKey">
<option value="default">--select--</option>
<option value="p1">supplier 1</option>
<option value="p2">supplier 2</option>
<option value="p3">supplier 3</option>
<option value="p4">supplier 4</option>
</select>
<label>Secondary
</label>
<select id="secondary_supplier" name="projectKey">
<option value="default">--select--</option>
<option value="s1">supplier 1</option>
<option value="s2">supplier 2</option>
<option value="s3">supplier 3</option>
<option value="s4">supplier 4</option>
</select>

Multiple Select Unselect And Disabled

I Have 2 Multiple Select Field On My Code
I Want Make If All Selected Then Other Option Will Be Unselect And Disabled And Similarly If Other Any Field Selected Then All Option Will Unselect And Disabled
My Code Is
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
And
<select multiple name="country[]" id="device" class="form-control" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>

By disabling an element you say i'll not use this element, I refuse to use this elemen, so disabled elements can not get Mouse Events, so disabling is wrong way.
Instead make it visually disabled.
Here is pure JS code, because i am not like jquery ;)
<style>
select {
height:300px;
width:150px;
}
</style>
<body>
<select multiple name="device[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'Android\'>Android</option>
<option value=\'iPod\'>iPod</option>
<option value=\'iPad\'>iPad</option>
<option value=\'Java\'>Java</option>
<option value=\'Windows\'>Windows</option>
<option value=\'Linux\'>Linux</option>
<option value=\'Mac\'>Mac</option>
</select>
<select multiple name="country[]" id="device" class="form-control" onChange="Go()" >
<option value=\'ALL\' selected="selected">ALL</option>
<option value=\'BD\'>Bangladesh</option>
<option value=\'IN\'>India</option>
<option value=\'ID\'>Indonesia</option>
<option value=\'NG\'>Naigeria</option>
<option value=\'PK\'>Pakistan</option>
</select>
<script>
function Go(){
parentElements = document.getElementsByTagName("select");
for(var i = 0; i < parentElements.length; i++){
parentElement = parentElements[i]
children = parentElement.childNodes;
for(var j = 0; j < children.length; j++){
childNode = children[j];
if(childNode.nodeName == "OPTION" || childNode.nodeName == "option"){
if(childNode.value == "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && k != j){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && k == j){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
if(childNode.value != "\\'ALL\\'" && childNode.selected == true){
for(var k = 0; k < children.length; k++){
if(typeof(children[k].value) !== "undefined" && children[k].value == "\\'ALL\\'"){
children[k].style.color = "#ccc";
children[k].style.textDecorationLine = "line-through";
children[k].selected = false;
}
if(typeof(children[k].value) !== "undefined" && children[k].value != "\\'ALL\\'"){
children[k].style.color = "";
children[k].style.textDecorationLine = "";
}
}
}
}
}
}
}
</script>
</body>

EDIT:
How about adding an extra button to reset the menus ?
Please check this fiddle
OLD:
If you are not holding ctrl key then other options will be deselected automatically
$(document).ready(function() {
$('#device, #country').on('change', function() {
var selectedVal = $(this).val();
for (var i = 0; i < selectedVal.length; i++) {
if (selectedVal[i] === 'ALL') {
// $("#device > option").attr('disabled','disabled');
$(this).find('option').attr('disabled', 'disabled');
$(this).find('option[value=ALL]').removeAttr('disabled');
} else {
$(this).find('option[value=ALL]').attr('disabled', 'disabled');
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control">
<option value='ALL'>ALL</option>
<option value='Android'>Android</option>
<option value='iPod'>iPod</option>
<option value='iPad'>iPad</option>
<option value='Java'>Java</option>
<option value='Windows'>Windows</option>
<option value='Linux'>Linux</option>
<option value='Mac'>Mac</option>
</select>
<select multiple name="country[]" id="country" class="form-control">
<option value='ALL'>ALL</option>
<option value='BD'>Bangladesh</option>
<option value='IN'>India</option>
<option value='ID'>Indonesia</option>
<option value='NG'>Naigeria</option>
<option value='PK'>Pakistan</option>
</select>

$('#device option').click(function(){
var Allselected = $('#device :selected').text();
var AllselectedCountry = $('#country :selected').text();
if(Allselected =="ALL"){
$('#device option:not(:selected)').addClass('ashClass');
}
else if (Allselected !="ALL"){
$('#device option:first-child').css('color', '#ccc');
$('#device option:not(:selected)').removeClass('ashClass');
}
});
$('#country option').click(function(){
var AllselectedCountry = $('#country :selected').text();
if(AllselectedCountry =="ALL"){
$('#country option:not(:selected)').addClass('ashClass');
}
else if (AllselectedCountry !="ALL"){
$('#country option:first-child').css('color', '#ccc');
$('#country option:not(:selected)').removeClass('ashClass');
}
});
.ashClass {
color: #ccc;
}
.blackClass {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<select multiple name="device[]" id="device" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'Android\'>Android</option><option value=\'iPod\'>iPod</option><option value=\'iPad\'>iPad</option><option value=\'Java\'>Java</option><option value=\'Windows\'>Windows</option><option value=\'Linux\'>Linux</option><option value=\'Mac\'>Mac</option> </select>
<select multiple name="country[]" id="country" class="form-control" >
<option value=\'ALL\' >ALL</option><option value=\'BD\'>Bangladesh</option><option value=\'IN\'>India</option><option value=\'ID\'>Indonesia</option><option value=\'NG\'>Naigeria</option><option
value=\'PK\'>Pakistan</option></select>
Updated the codes,Hope this one resolves your problem.
Is this what you are asking?

Controlling combined value of two select inputs with jquery

I have two simple select inputs with same values, from 0% to 50% in both of them. I would like to control their values, so that when their values are combined, they do not exceed 50%. So no matter which of the two inputs is changed, the other one will change its value accordingly.
So let's say if first input has value 5% the second input should have value of 45% and vice versa.
I tried using .change function with an if/else if statement but i just cant get it to work. Needless to say i dont have much expirience with jquery.
HTML:
<select id="myselect1">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
<select id="myselect2">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
JS:
$('#myselect1').change(function(){
if ($this.value == '5'){
$('#myselect2').val('45');
}
else if ($this.value == '10'){
$('#myselect2').val('40');
}
else if ($this.value == '15'){
$('#myselect2').val('35');
}
else if ($this.value == '20'){
$('#myselect2').val('30');
}
else if ($this.value == '25'){
$('#myselect2').val('25');
}
else if ($this.value == '30'){
$('#myselect2').val('20');
}
else if ($this.value == '35'){
$('#myselect2').val('15');
}
else if ($this.value == '40'){
$('#myselect2').val('10');
}
else if ($this.value == '45'){
$('#myselect2').val('5');
}
else if ($this.value == '50'){
$('#myselect2').val('0');
}
});
$('#myselect2').change(function(){
if ($this.value == '5'){
$('#myselect1').val('45');
}
else if ($this.value == '10'){
$('#myselect1').val('40');
}
else if ($this.value == '15'){
$('#myselect1').val('35');
}
else if ($this.value == '20'){
$('#myselect1').val('30');
}
else if ($this.value == '25'){
$('#myselect1').val('25');
}
else if ($this.value == '30'){
$('#myselect1').val('20');
}
else if ($this.value == '35'){
$('#myselect1').val('15');
}
else if ($this.value == '40'){
$('#myselect1').val('10');
}
else if ($this.value == '45'){
$('#myselect1').val('5');
}
else if ($this.value == '50'){
$('#myselect1').val('0');
}
});
JS Fiddle

Your code will work if you changed
$this.value to this.value or assign this to $this (var $this = this);
However, this can be done in a very simple way
$('#myselect1, #myselect2').change(function() {
var who = this.id === 'myselect1' ? '#myselect2' : '#myselect1';
// if the ID of the changed select is #myselect1 who will be #myselect2 or vice versa.
$(who).val(50 - this.value); // change the value of the other select
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselect1">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>
<select id="myselect2">
<option value="0">0%</option>
<option value="5">5%</option>
<option value="10">10%</option>
<option value="15">15%</option>
<option value="20">20%</option>
<option value="25">25%</option>
<option value="30">30%</option>
<option value="35">35%</option>
<option value="40">40%</option>
<option value="45">45%</option>
<option value="50">50%</option>
</select>

Put a listener on both select boxes, do some maths to work out what the other value needs to be and the check to see which element we need to change.
http://jsfiddle.net/qj459ntg/3/
$('select').change(function(){
var MaxValue = 50
var CurValue = $(this).val();
var NewValue = MaxValue - CurValue;
if ($(this).is('#myselect1')) {
$('#myselect2').val(NewValue);
} else {
$('#myselect1').val(NewValue);
}
});

You have two issues going on.
You need to change all your statements to like:
if ($(this).val() == '5'){
$('#myselect2').val('45');
}
$this is not a valid selector in jquery.
.value cannot be inter,mingled with a jQuery selector.

$("#select_1").change(function() {
var select_1_value = $("#select_1").val();
var select_2_value = $("#select_2").val();
var value_1 = parseInt(select_1_value);
var value_2 = parseInt(select_2_value);
var sum_values = value_1 + value_2;
if (sum_values > 50)
{
var select_2_needed = value_2 - ((value_1 + value_2) - 50);
$("#select_2").val(select_2_needed + "%");
}
});
$("#select_2").change(function() {
var select_1_value = $("#select_1").val();
var select_2_value = $("#select_2").val();
var value_1 = parseInt(select_1_value);
var value_2 = parseInt(select_2_value);
var sum_values = value_1 + value_2;
if (sum_values > 50)
{
var select_1_needed = value_1 - ((value_1 + value_2) - 50);
$("#select_1").val(select_1_needed + "%");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id = "select_1">
<option>0%</option>
<option>5%</option>
<option>10%</option>
<option>15%</option>
<option>20%</option>
<option>25%</option>
<option>30%</option>
<option>35%</option>
<option>40%</option>
<option>45%</option>
<option>50%</option>
</select>
<select id = "select_2">
<option>0%</option>
<option>5%</option>
<option>10%</option>
<option>15%</option>
<option>20%</option>
<option>25%</option>
<option>30%</option>
<option>35%</option>
<option>40%</option>
<option>45%</option>
<option>50%</option>
</select>
You will need something like this (see snippet linked with).

$('#myselect1').change(function(){ if($(this).val() < 50 ){ var value
= 50 - $(this).val(); $('#myselect2').val(value); }else if($(this).val() == 50){ $('#myselect2').val(0); } });
$('#myselect2').change(function(){ if($(this).val() < 50 ){ var value
= 50 - $(this).val(); $('#myselect1').val(value); }else if($(this).val() == 50){ $('#myselect1').val(0); } });
Hope this will help you.

simple jQuery validation failed

I want to validate my value, but doesnt quite work if someone could help me out
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged);
countrySelectChanged();
var valid;
$('#click').click(function(){
if ($("#us-select").val() =="" || $("#germany-select").val() =="" ){
valid = false;
} else {
valid = true;
}
if (!(valid)) {
$('#msg').html('NOt Passed')
} else {
$('#msg').html('Pass')
}
});
});
Here is HTML
<select id="country-select">
<option value="none" >---</option>
<option value="us" >US</option>
<option value="germany">Germany</option>
</select>
<select id="us-select" class="sub-menu hide">
<option value="none" >---</option>
<option value="austin" >Austin</option>
<option value="austin2" >Austin2</option>
</select>
<select id="germany-select" class="sub-menu hide">
<option value="none" >---</option>
<option value="berlin">Berlin</option>
<option value="berlin2">Berlin2</option>
</select>
<select id="none-select" class="sub-menu hide">
<option value="none" >---</option>
</select>
click me
<div id="msg"></div>​
This is online version
http://jsfiddle.net/RPWPZ/14/

Working Demo http://jsfiddle.net/SJ7Sg/ or http://jsfiddle.net/95zXa/
To get the selcted option you need to do this $("#us-select option:selected").val()
API => http://api.jquery.com/selected-selector/
Rest it should fit the cause :)
code
function countrySelectChanged() {
$('.sub-menu').hide();
var selectedCountry = $('#country-select').val();
if (selectedCountry) {
$('#' + selectedCountry + '-select').show();
}
}
$(document).ready(function() {
$('#country-select').change(countrySelectChanged);
countrySelectChanged();
var valid;
$('#click').click(function(){
if ($("#us-select option:selected").val() =="none"){
valid = false;
}else{
valid = true;
}
if (valid) {
$('#msg').html('Success')
return false;
} else {
$('#msg').html('Fail')
}
});
});
​

if ($('#country-select').val() =="us") {
valid = false;
} else

you must change
$("#us-select").val() =="" || $("#germany-select").val() ==""
with
$("#us-select").val() =="none" || $("#germany-select").val() =="none"
because your default value of select is "none" ->
<select id="country-select">
<option **value="none"** >---</option>
<option value="us" >US</option>
<option value="germany">Germany</option>
</select>