Develop Reference

Browser short circuit evaluation not working?

I have the following code:
Logic:
var describe = document.getElementById('describe');
var brandpower = document.getElementById('brandpower');
var describeV = describe.options[describe.selectedIndex].value || describe.value;
var brandpowerV = brandpower.options[brandpower.selectedIndex].value || describe.value;
function pollRadio() {
var handle = window.setInterval(function() {
if (jQuery('input[name="dealer"]:checked').val() == 'Non-Pro') {
jQuery('#domain').value = "null";
jQuery('#website-container').addClass('important-hide')
//window.clearInterval(handle);
} else if (jQuery('input[name="dealer"]:checked').val() == 'Pro') {
jQuery('#website-container').removeClass('important-hide')
jQuery('#domain').value = "";
jQuery('#describe').replaceWith('<select id="describe" class="describeClass custom-select" required ><option value="" selected>Tell us about your business.</option><option value="Just getting started">Just getting started</option><option value="Expanding Quickly">Expanding Quickly</option><option value="Need new cutsomers">Need new cutomers</option><option value="I need better products & solutions">I need better products & solutions</option><option value="Other">Other</option></select>');
window.clearInterval(handle);
}
}, 100);
}
pollRadio();
$(document).on('change', "#describe", function() {
if (jQuery('.describeClass').val() == 'Other') {
jQuery('.describeClass').replaceWith('<input id="describe" class="describeClass form-text" placeholder="Tell us about Other" type="text" style="height:52px; width:100%;" required> ')
}
});
$('#brandpower').on('change', function(){
if (jQuery('#brandpower').val() == 'Other') {
jQuery('#brandpower').replaceWith('<input id="brandpower" placeholder="Tell us about Other" type="text" class="form-text" style="height:52px; width:100%;" required> ')
}
});
Markup:
<div class="padded-container">
<div class="form-container-padded">
<select id="describe" class="custom-select describeClass" required >
<option value="" selected>Which best describes you?</option>
<option value="Household CEO">Household CEO</option>
<option value="Geek Dad">Geek Dad</option>
<option value="Geek Mom">Geek Mom</option>
<option value="Home Automation Thought Leader">Home Automation Thought Leader</option>
<option value="New Home Automation Business Owner">New Home Automation Business Leader</option>
<option value="Z-Wave Evangelist">Z-Wave Evangelist</option>
<option value="Integrator">Integrator</option>
<option value="IoT Expert">IoT Expert</option>
<option value="Enviormentalist">Enviormentalist</option>
<option value="Educator">Educator</option>
<option value="Computer Science Graduate">Computer Science Graduate</option>
<option value="CES Atendee">CES Atendee</option>
<option value="Competitor">Competitor</option>
<option value="College Student">College Student</option>
<option value="Urban Dweller">Urban Dweller</option>
<option value="Minimalist">Minimalist</option>
<option value="Home Builder">Home Builder</option>
<option value="New Home Owner">New Home Owner</option>
<option value="Electrician">Electrician</option>
<option value="Plumber">Plumber</option>
<option value="Other type of Tradesmen/Tradeswoman">Other type of Tradesmen/Tradeswoman</option>
<option value="General Contractor">General Contractor</option>
<option value="Generalist">Generalist</option>
<option value="Summer Home Owner">Owner</option>
<option value="Serial Entreprenour">Serial Entreprenour</option>
<option value="Tech Savvy">Tech Savvy</option>
<option value="Tinkerer">Tinkerer</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div class="padded-container">
<div class="form-container-padded">
<select id="brandpower" class="custom-select" required>
<option value="" selected>How well do you know dome?</option>
<option value="I don't. This is my first time hearing about Dome.'">I don't. This is my first time hearing about Dome.</option>
<option value="Have heard of somewhere, but not sure where.">Have heard of somewhere, but not sure where.</option>
<option value="I discovered Dome while researching on the internet.">I discovered Dome while researching on the internet.</option>
<option value="I clicked on an ad for Dome I saw online">I clicked on an ad for Dome I saw online</option>
<option value="Someone told about Dome">Someone told about Dome</option>
<option value="We met at a tradeshow">We met at a tradeshow</option>
<option value="I'm alreaedy interested in working with Dome">I'm alreaedy interested in working with Dome</option>
<option value="I have Dome installed in my home">I have Dome installed in my home</option>
<option value="I've been to Dome's websites several times">I've been to Dome's websites several times</option>
<option value="Other">Other</option>
</select>
</div>
</div>
So, the idea is, on lines 2 - 4, if one element doesn't exist the interpreter picks up the value of the one that does hence the || operator.
The jQuery that is using the replaceWith method is dynamically changing DOM elements if certian conditions are met. Part of me feels as if this, coupled with getDocumentById is part of the issue because an ID can only exist once. It looks to exist properly though in the console.
However, while I believe this should work in theory, chrome throws an error where at the [element.selectedIndex].value part because it is undefined. How can I overcome this error and have my forms work the way I want them to?
EDIT: Short Circut Evaluation JavaScript OR (||) variable assignment explanation

The interpreter will try to evaluate everything before the ||, so it will blow up if any of the following are true:
describe is undefined (no element in the DOM with that ID), so you can't access describe.options
describe.options is undefined, meaning you can't reference the [describe.selectedIndex] property on it
describe.selectedIndex is undefined, which means that describe.options[describe.selectedIndex] will return undefined, and then you cannot access the value property on it
You'll just need to be more defensive, maybe something like this:
var describeV = (describe && describe.options && describe.selectedIndex) ? describe.options[describe.selectedIndex].value : describe.value;

jquery chained selection based single select into two select

I want to make my 2 <select> change their values based on a single <select>, for example:
I want my kodethnajaran and kodesemester change their options value based on my selection on kodematkul.
Here is my code:
<div class="form-group">
<label>Mata Kuliah</label>
<select class="form-control" name="kodematkul" id="kodematkul" required>
<option value="null" selected="selected">-- Pilih --</option>
<option value='mk001'>Mobile Programming</option>
<option value='mk003'>Matematika Dasar</option>
<option value='mkl001'>Logika dan Pemrograman</option>
</select><br>
</div>
<div class="form-group">
<label>Tahun Ajaran</label>
<select class="form-control" name="kodethnajaran" id="kodethnajaran" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='thn001'class='mk001'>2017</option>
<option value='thn001'class='mk003'>2017</option>
<option value='thn001'class='mkl001'>2017</option>
<option value='thn002'class='mk003'>2016</option>
</select><br>
</div>
<div class="form-group">
<label>Semester</label>
<select class="form-control" name="kodesemester" id="kodesemester" required>
<option value="-" selected="selected">-- Pilih --</option>
<option value='sem002'class='mk001'></option>
<option value='sem001'class='mk003'></option>
<option value='sem001'class='mkl001'></option>
<option value='sem002'class='mkl001'></option>
<option value='sem002'class='mk003'></option>
</select><br>
</div>
The code above basically contains only my <select>, with data from sql. The script that I tried is:
$("#kodethnajaran,#kodesemester").chained("#kodematkul");
I'm not sure if this is applicable, because I tried to implement it based on this demo:
http://www.appelsiini.net/projects/chained/demo.html
it seems it can only change 'kodethnajaran' but doesnt change 'kodesemester' value.
Here's the fiddle...
https://jsfiddle.net/vu671ubm/

Ok so I investigated a little and the reason why your solution was not working as in example was jQuery version, You should use 1.10 to have chained working
Here goes codePen http://codepen.io/kejt/pen/NdzZqv?editors=1111
Also I have changed your code a little to work on classes
$(".form-control").each(function() {
$(this).chained($("#kodematkul"));
});
The class I have used is just an example, you can add new class for all selects that need to depend on given one. For example dependant-select and add this class to all select which should change on the first one update

How to set the value of multiple dropdown selectors based on the value of another dropdown selector on change?

EDIT: post the question and magically it starts working :/ Maybe because I removed the alert?
So I have a dropdown selector that is supposed to represent the default for a set of dropdown selectors that make up a country list.
Here is one of the many code permutations I tried:
$("#edit-ip-ban-setdefault").change(function () {
var selected = this.selectedIndex
$(".form-type-select").each(function() {
$('.form-select').attr('selectedIndex', selected);
$(".form-select").val(selected).change();
});
});
Here is the relevant HTML for the default dropdown:
<select class="form-select valid" name="ip_ban_setdefault" id="edit-ip-ban-setdefault" selectedindex="1">
<option value="0"></option>
<option value="1"> Read Only </option>
<option selected="selected" value="2"> Complete Ban </option>
</select>
And here is the HTML for one of the many dropdowns I wish to have updated on change:
<div class="form-item form-type-select form-item-ip-ban-AF">
<select class="form-select valid" id="edit-ip-ban-af" name="ip_ban_AF">
<option selected="selected" value="0"></option>
<option value="1">Read Only</option>
<option value="2">Complete Ban</option>
</select>
</div>
I'm using jQuery 1.7, but ideally the solution would work for 1.5 to 1.10.

binding ng-click to option values

Hi I want a particular function to be called when anything is selected from a given dropdown. That function needs as an argument the value of the option selected. So far this is what I have got :
<label class="control-label col-lg-3">Action Type</label>
<div class="col-lg-9">
<select class="form-control" id="type" >
<option value="">Please Select</option>
<option value="SCHEDULE" ng-click="getHtml(/*SCHEDULE*/)">
SCHEDULE
</option>
<option value="HTTP" ng-click="getHtml(/*HTTP*/)" >
HTTP
</option>
<option value="RMQ" ng-click="getHtml(/*RMQ*/)">
RMQ
</option>
<option value="WFE" ng-click="getHtml(/*WFE*/)">
WFE
</option>
</select>
</div>
However this does not seem to be working. Can someone please help?
The method is in the controller as:
$scope.getHtml=function(option){
console.log("sent type is: "+type);
var type=$('#type').val();
//BLAH BLAH...
}

You should use ngChange and ngModel directive on select element.
ngChange: Evaluate the given expression when the user changes the input.
Example
<select class="form-control" id="type" ng-model='type' ng-change="getHtml(type)">
<option value="">Please Select</option>
<option value="SCHEDULE">SCHEDULE</option>
<option value="HTTP">HTTP</option>
<option value="RMQ">RMQ</option>
<option value="WFE">WFE</option>
</select>
DEMO

you need to use ng-change here,
first assign a model to select
ng-model="modelName" the modelName is a scope variable which has the value of select box,
second remove the ng-click="getHtml..) from options.
and using ng-change you can call a controller function with the value of modelName variable when the select box changing its value.
<select class="form-control" id="type" ng-change="getHtml(modelName)" ng-model="modelName">
<option value="">Please Select</option>
<option value="SCHEDULE">
SCHEDULE
</option>
.....
</select>

select option using jquery fails?

Here iam trying to get values based on #category selection when i select a category men or women,following select option should show the relevant options.what i did satisfied my requirement but when i try to access it using keyboard(down arrow) it shows all the options of the #subcategory.here is the code and fiddle.any help is thankful.
my fiddle http://jsfiddle.net/JUGWU/
HTML:
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1">MEN</option>
<option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing">Clothing</option>
<option id="Accessories" value="Accessories">Accessories</option>
<option id="Footwear" value="Footwear">Footwear</option>
<option id="Watches" value="Watches">Watches</option>
<option id="Sunglasses" value="Sunglasses">Sunglasses</option>
<option id="Bags" value="Bags">Bags</option>
</select>
Jquery:
$(document).ready(function(){
$("#category").change(function() {
var xyz = $("option:selected").attr("id");
alert(xyz);
if(xyz === "menu1"){
$("#subcategory option").hide();
$("#Clothing,#Footwear").show();
}
});
});

Try this in your conditional. The disabled property doesn't allow keyboard selection. Seems to work for me.
$("#subcategory option").prop('disabled', true).hide();
$("#Clothing,#Footwear").prop('disabled', false).show();
Also, your logic breaks if a user switches from men to women.

This answer is not exactly addressing your problem (using keyboard(down arrow)) but I think it is IMHO a better way to do what you want. And also I used the fixed part from #user2301903 answer, just to make my point. my main point here was using the markup attributes.
We can use our markup attributes to have less complexity, I changed your markup like this (added a catg attribute):
<select id="category" name="category">
<option>-select-</option>
<option value="MEN" id="menu1" catg="m">MEN</option>
<option value="WOMEN" id="menu2" catg="w">WOMEN</option>
</select>
<br>
<select id="subcategory">
<option></option>
<option id="Clothing" value="Clothing" catg="m">Clothing</option>
<option id="Accessories" value="Accessories" catg="w">Accessories</option>
<option id="Footwear" value="Footwear" catg="m">Footwear</option>
<option id="Watches" value="Watches" catg="w">Watches</option>
<option id="Sunglasses" value="Sunglasses" catg="w">Sunglasses</option>
<option id="Bags" value="Bags" catg="w">Bags</option>
</select>
and your code like this:
$(document).ready(function () {
$("#category").change(function () {
var catg = $("option:selected").attr("catg");
//from #user2301903 answer
$("#subcategory option").prop('disabled', true).hide();
$("option[catg=" + catg + "]").prop('disabled', false).show();
});
});
and this is your working DEMO;
and this one is another way of doing what you want which works even in IE: IE_DEMO