Develop Reference

Checking if all selects are completed in Jquery

I am trying to count the number of VISIBLE selects (Which I've done in the alert in the Jquery) and also count the number of VISIBLE selects that have an option selected. If both numbers match then do some action.
Currently, when I change the first select and choose an option, it doesn't alert with a value. When I change the next select and choose an option it shows the count is 1 when it is meant to be 2. when I select the third select then it shows 3. However these numbers are all inaccurate. What is the cause of this?
<div id="secondPanelID">
<div class="form-group input-group">
<label for="gestationalAgeInWeeks">Gestational Age : </label>
<div>
<select id="gestationalAgeInWeeks" name="gestationalAgeInWeeks" class="form-control">
<option disabled selected value>SELECT</option>
<option value="0">0</option>
</select>
</div>
</div>
<div class="form-group input-group">
<label>days</label>
<div>
<select name=gestionalDays class="form-control">
<option disabled selected value>SELECT</option>
<option value="0">0 Days</option>
<option value="1">1 Day</option>
</select>
</div>
</div>
</div>
Added listeners to each of the selects
$("select[name=gestationalAgeInWeeks]").change(checkingColourSelectsGeneralData);
$("select[name=gestionalDays]").change(checkingColourSelectsGeneralData);
Jquery
var selectCounterInGeneral = 0;
function checkingColourSelectsGeneralData(){
alert($('#secondPanelID select:visible').length)
$('#secondPanelID select:visible').change(function () {
var o = $(this);
if (!o.hasClass('counted')) {
selectCounterInGeneral++;
o.addClass('counted');
}
alert("number of selects: "+selectCounterInGeneral);
});
}

Just check if all visible selects have value this way:
function countSelected(e) {
var toReturn = true;
$('select:visible').each(function(i) {
if( !$(this).val() ) {
toReturn = false;
};
});
console.log( toReturn );
};
$('select').on('change', countSelected);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select style="display: none;">
<option disabled selected value>--choose--</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
Also on JSFiddle.

Connecting two Combo-boxes with html and js

I am trying to make these two combo-boxes join each other. But, my problem is, that my second combo-box cannot change if I select the category.
This is what I've done.
HTML CODE
<!-- language: lang-html -->
<label for="JenisBarang">Jenis Barang</label>
<br>
<select id="JenisBarang" name="JenisBarang">
<option value="0" selected="selected">Mouse</option>
<option value="1">Keyboard</option>
<option value="2">Webcam</option>
</select>
<br>
<label for="PilihBarang">Pilih Barang</label>
<br>
<select id="PilihBarang_0" name="PilihBarang_0" style="display: inline;">
<option value="1">Asus GX-1000</option>
<option value="2">Logitech M238 Edisi : Burung Hantu</option>
<option value="3">Logitech M238 Edisi : Astronot</option>
<option value="4">Logitech M238 Edisi : Musang</option>
<option value="5">Logitech M238 Edisi : Kera</option>
<option value="6">Lenovo N700</option>
<option value="7">Asus Gladius</option>
</select>
<select id="PilihBarang_1" name="PilihBarang_1" style="display: none;">
<option value="1">Logitech K400r</option>
<option value="2">Logitech MK240</option>
<option value="3">Asus GK2000</option>
</select>
<select id="PilihBarang_2" name="PilihBarang_2" style="display: none;">
<option value="1">Lenovo Webcam</option>
<option value="2">Logitech C920</option>
</select>
<br>
Java Script CODE
<script>
function change_product(evt)
{
var JenisBarang=document.getElementById('JenisBarang'),whichstate;
whichstate=JenisBarang.options[state.selectedIndex].value;
for(var i=0;i<JenisBarang.options.length;i++)
document.getElementById('PilihBarang_'+i).style.display=(i==whichstate ? 'inline':'none');
}
</script>
Dictionary
JenisBarang means the category ex Mouse
PilihBarang means the items ex Mouse Logitech M185

Can you check the following Code. use value specify options in the second combo box. It is a simple code hope nothing to explain.. I have placed couple of comments.
$("#comboBox1").change(function() {
if ($(this).data('options') === undefined) {
/* Get all the options in second Combo box*/
$(this).data('options', $('#comboBox2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#comboBox2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<select name="comboBox1" id="comboBox1">
<option value="0">Please Select</option>
<option value="1">Mouse</option>
<option value="2">Keyboard</option>
<option value="3">WebCam</option>
</select>
<!-- Second Combo Box-->
<select name="comboBox2" id="comboBox2">
<option value="1">Mouse Model 1</option>
<option value="1">Mouse Model 2</option>
<option value="1">Mouse Model 3</option>
<option value="2">Keyboard model 1</option>
<option value="2">Keyboard model 2</option>
<option value="2">Keyboard model 3</option>
<option value="3">webcam model 1</option>
<option value="3">webcam model 2</option>
</select>
Edit : JS Fiddle link JS Fiddle

disable an option of a dropdown list in selectize.js

I use selectize.js for dropdown lists in my project. I have 3 dropdown lists related to each other. When I click an option from first dropdown list, some elements from second and third dropdown lists should be disabled. When I click an option from second dropdown list, some elements from third dropdown list should be disabled.
When I try some basic jquery or javascript methods to disable an option from dropdownlists, they don't affect. However, when I delete selectize.js classes from dropdownlists, they immediately affect, disable options that I want.
Here is my sample code for dropdownlists;
<div id="pro_yur_gru" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person</label>
<select id="Person1" class="demo-default" name="PERSONLIST" onchange="my_onchange_function_to_remove_2_and_3()">
<option value="">Select a person...</option>
<option value="4">Albert</option>
<option value="1">Frank</option>
<option value="3">Doug</option>
<option value="5">Arnold</option>
</select>
<script type="text/javascript">
$('#Person1').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
<div id="pro_yur_gru2" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person 2</label>
<select id="Person2" class="demo-default" name="PERSONLIST2" onchange="my_onchange_function_to_remove_3()">
<option value="">Select a person...</option>
<option value="4">Thomas</option>
<option value="1">Mark</option>
<option value="3">Nicholas</option>
<option value="5">James</option>
<option value="6">Matt</option>
<option value="7">Kenny</option>
</select>
<script type="text/javascript">
$('#Person2').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
<div id="pro_yur_gru_3" class="row form-row">
<div class="col-lg-4 col-md-4">
<label class="form-label">Person3</label>
<select id="Person3" class="demo-default" name="PERSONLIST3">
<option value="">Select a person...</option>
<option value="1">Chuck</option>
<option value="3">Alex</option>
<option value="2">Donald</option>
<option value="5">John</option>
<option value="7">Dwayne</option>
<option value="6">Kevin</option>
<option value="4">Tim</option>
<option value="8">Patrick</option>
</select>
<script type="text/javascript">
$('#Person3').selectize({
allowEmptyOption:true,
create: true,
dropdownParent: 'body'
});
</script>
</div>
</div>
What I need is something like this;
to change <option value="4">Albert</option> to <option disabled value="4">Albert</option> by using a javascript function.
Edit: I use this project on IE10.

Disabled select options can also be achieved by overriding the render function.
$('#control').selectize({
render: {
option: function(item, escape) {
if (item.value === '') {
return '<div style="pointer-events: none; color: #aaa;">' + escape(item.label) + '</div>';
}
return '<div>' + escape(item.label) + '</div>';
}
}
});
Or uses plugin https://github.com/mondorobot/selectize-disable-options

Show hidden select menus if value of another select menu is selected

I am new to jQuery and javaScript. I am using bootstrap. I have a select menu that is visible and two additional select menus that are hidden. I would like to show the hidden select menus id the user selects "TV" from the visible select menu options. If they select any of the other value options from the visible select menu, I need to display a simple text box where they can explain. After researching online I attempted to do it using some js, but it is not working. Below is my code and here is my jsfiddle link: https://jsfiddle.net/nx6cc1Lc/
HTML:
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6 hidden">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6 hidden">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
Javascript:
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$("#heard_from_station").removeClass('hidden');
$("#heard_from_provider").removeClass('hidden');
}
else
{
$('#heard_from_station').removeClass().addClass('hidden');
$('#heard_from_provider').removeClass().addClass('hidden');
}
});
});

Update your script as given below.
// show tv station and provider menus if TV selected
$(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
{
$("#heard_from_station").parent().removeClass('hidden');
$("#heard_from_provider").parent().removeClass('hidden');
}
else
{
$('#heard_from_station').parent().addClass('hidden');
$('#heard_from_provider').parent().addClass('hidden');
}
});
});
As your html contains "hidden" class on the parent element ".parent()", you need to add / remove class on the parent. Alternatively, you can also give ID to the parent elements and use those ids directly in your script, without using ".parent()".

Just use show() and hide() of jquery for this.Below is the code part for your issue
<script src="jquery.min.js"></script>
<script src="sample.js"></script>
<div class="hear-from">
<div class="selects-4 col-xs-12">
<label for="heard_tv">Where did you hear about us from?</label>
<select id="heard_tv" class="form-control selectTV" name="heard_tv">
<option>--Choose Option--</option>
<option value="TV">TV Commercial</option>
<option value="Radio">Radio Advertisement-Other</option>
<option value="OT">Other</option>
</select>
</div>
<div class="selects-5 col-xs-6" style="display:none">
<select id="heard_from_station" class="form-control selectStation" name="heard_from_station">
<option>--Choose Station--</option>
<option value="TV:ABC">ABC News</option>
<option value="TV:TWCNews">New York 1 - TWC News</option>
<option value="TV:BBC">BBC America</option>
<option value="TV:CNBC">CNBC</option>
<option value="TV:CNN">CNN</option>
<option value="TV:Fox News">FOX News</option>
<option value="TV:Fox Business">FOX Business</option>
<option value="TV:TWCNews">Time Warner News</option>
<option value="TV:HLN">Headline News</option>
<option value="TV:MSNBC">MSNBC</option>
<option value="TV:Other">Other</option>
</select>
</div>
<div class="selects-6 col-xs-6" style="display:none">
<select id="heard_from_provider" class="form-control selectProvider" name="heard_from_provider">
<option>--Choose Provider--</option>
<option value="TVP:ATT">AT & T</option>
<option value="TVP:Comcast">Comcast</option>
<option value="TVP:Cablevision">Cablevision</option>
<option value="TVP:Charter">Charter Comm.</option>
<option value="TVP:Cox">Cox Comm.</option>
<option value="TVP:DirectTV">DirectTV</option>
<option value="TVP:Dish">Dish Network</option>
<option value="TVP:TimeWarner">Time Warner Cable</option>
<option value="TVP:VerFiOS">Verizon FiOS</option>
<option value="TVP:Antenna">Over the Air / Antenna</option>
<option value="TVP:Other">Other TV Provider</option>
</select>
</div>
</div>
<script> $(document).ready(function(){
$('#heard_tv').on('change', function() {
if ( this.value === "TV")
//.....................^.......
{
$(".selects-5").show();
$(".selects-6").show();
}
else
{
$('.selects-5').hide();
$('.selects-6').hide();
}
});
});</script>

The problem is that the div tags that contain your secondary select menus are hidden, not the select menus themselves -- even so, your script is trying to remove the class from the select menus. So there are a number of ways you can fix this.
One way to fix this is to apply the hidden class to your select menus instead of your div tags.
<div class="selects-5 col-xs-6">
<select id="heard_from_station" class="form-control selectStation hidden" name="heard_from_station">
...
</select>
</div>
<div class="selects-6 col-xs-6">
<select id="heard_from_provider" class="form-control selectProvider hidden" name="heard_from_provider">
...
</select>
</div>

In several selects make selected options uniq

I have question where you need to find pairs of words in Russian and English
<div class="form-group" id="question4">
<label for="q4FirstSelectEN">4</label>
<div class="row">
<div class="col-lg-offset-2 col-lg-2 q4EN">
<select name="firstSelectEn" id="q4FirstSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4SecondSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
<select class="top-buffer" name="secondSelectEn" id="q4ThirdSelectEN">
<option disabled selected style="display: none" value=""></option>
<option value="red">red</option>
<option value="green">green</option>
<option value="purple">purple</option>
</select>
</div>
<div class="col-lg-2 q4RU">
<select name="firstSelectRu" id="q4FirstSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4SecondSelectRu">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
<select class="top-buffer" name="firstSelectRu" id="q4ThirdSelectRU">
<option disabled selected style="display: none" value=""></option>
<option value="red">красный</option>
<option value="green">зелёный</option>
<option value="purple">фиолетовый</option>
</select>
</div>
</div>
</div>
When user selects for example 'red' in (select) inside (div class='q4EN') in all remaining selects in this (div class=q4EN) selected 'red' option become nonSelectable
(nonSelectable is class in css with display:none)
When user change decision and select 'green' instead of 'red' in first (select) red became available in rest selects and green become nonSelectable
When all 3 select have their value user can't change anything
My js for this is not working and I out of ideas
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select")
.not(this)
.find("option:selected")
.addClass("nonSelectable");
});

I believe the problem is order of operations.
$(".q4EN").find("select").change(function () {
$(".q4EN").find("select") //Finds all select lists
.not(this) //Finds all except the one just changed
.find("option:selected") //Finds selected of all except the one just changed
.addClass("nonSelectable"); //Wont do anything because nothing was selected
});
Try the following:
$(".q4EN").find("select").change(function() {UpdateOptions();});
function UpdateOptions(){
var ss = $(".q4EN").find("select");
ss.find('option').prop("disabled", false); //Enable all before disabling selected
ss.each(function () {
var s = $(this).val();
if(s != undefined && s != "") {
ss.find("option[value=" + s + "]").prop("disabled", true);
}
});
}

This is an alternate way to achieve what you need. It basically iterate through every select element and find the corresponding option and disables it.
$('select').find("option").addClass("selectable");
$('select').on("change",function()
{
// $(this).find("option").prop("disabled",false); // uncomment this if you wish to reset the disabled selection
var $thisId = this.id;
var $selectedOption = $(this).find("option:selected").val();
$('select').each(function()
{
if(this.id !== $thisId)
{
// $(this).find("option").removeClass("non-selectable").addClass("selectable"); // uncomment this if you wish to reset the disabled selection
$(this).find("option[value=" + $selectedOption + "]").prop("disabled",true).addClass("non-selectable").removeClass("selectable");
}
});
})
https://fiddle.jshell.net/a2n234eq/4/
To target a specific group ( like EN and RU ) , change $('select') to $('.q4EN select')