Develop Reference

JavaScript - how to remove `options` by its `value`

I have a dropdown menu with products similiar like this
<select class="fruits" >
<option value="1" >Oranges</option>
<option value="2" >Bananes</option>
<option value="3" >Apples</option>
</select>
I need to remove options by its value. How to do that ?
Pure JavaScript please.
EDIT : I know that I need to use element.removeChild(child) method. But how to reference child by its value. Thats my point.
EDIT 2 : I use the script of zdrohn below and it works. Because I have several fruits dropdowns with the same collection I need to iterate trough all dropdowns and delete it from all dropdowns. This is my code now :
<script type='text/javascript'>
var id = 3;
var el= document.getElementsByClassName("fruits");
for (i=0;i<el.length;i++) {
for(var n = 0; n < el[i].length; n++) {
if(el[i][n].value == id) {
el[i][n].remove();
}
}
</script>
Though it works I wonder about that I do not need to use the parent.removeChild() method. How comes ?
P.S. I wonder that peole vote this question down. As the response shows their are several solutions. Though not all are sufficiantly explained.

Here is a snippet to play with.
The code removes the option with value = 3
window.onload = function() {
var optionToDelete = document.querySelector("select.fruits > option[value='3']");
optionToDelete.parentNode.removeChild(optionToDelete);
}
<select class="fruits">
<option value="1">Oranges</option>
<option value="2">Bananes</option>
<option value="3">Apples</option>
</select>
EDIT: Based on the updated question - I have several fruits drop-downs.
We could make use of querySelectorAll to select all matching elements and forEach to apply the desired logic on each element in the selected list.
window.onload = function() {
var optionsToDelete = document.querySelectorAll("select.fruits > option[value='3']");
optionsToDelete.forEach(function(element, index, array) {
element.parentNode.removeChild(element);
});
}
<select class="fruits">
<option value="1">Oranges</option>
<option value="2">Bananes</option>
<option value="3">Apples</option>
</select>
<select class="fruits">
<option value="1">Seville oranges</option>
<option value="2">Burro Bananes</option>
<option value="3">Baldwin Apples</option>
</select>
<select class="fruits">
<option value="1">Bergamot oranges</option>
<option value="2">Red Bananes</option>
<option value="3">Gravenstein Apples</option>
</select>

<select class="fruits" >
<option value="1" >Oranges</option>
<option value="2" >Bananas</option>
<option value="3" >Apples</option>
</select>
<script type='text/javascript'>
var valueToRemove = 1;
var select = document.getElementsByClassName('fruits');
for(var i = 0; i < select[0].length; i++) {
if(select[0][i].value == valueToRemove) {
select[0][i].remove();
}
}
</script>
Edit:
<select class="fruits" >
<option value="1">Oranges</option>
<option value="2">Bananas</option>
<option value="3">Apples</option>
</select>
<br>
<label>Input value to delete</label><input type='text' id='delete_value'>
<button onclick='remove(document.getElementById("delete_value").value)'>Delete</button>
<script type='text/javascript'>
function remove(item) {
var valueToRemove = item;
var select = document.getElementsByClassName('fruits');
for(var i = 0; i < select[0].length; i++) {
if(select[0][i].value == valueToRemove) {
select[0][i].remove();
}
}
}
</script>

You can select the desired option by using document.querySelector() and a selector of this form
A more complete list of selectors can be found here
Example

var element = document.evaluate( '//option[#value="1"]' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
element.parentNode.removeChild(element)

Execute after multi conditions are true

I want to make dynamic form field. for instance, depends on the selection of form field, I want to show hidden field or hide showed block.
For example, if I selected first field with 'high school', then show 'Marital Status' field. This field is hidden by default.
See the example code here
Thank you so much!!
Here is HTML
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Check your eligibility</h2>
<h3 class="fs-subtitle">About yourself</h3>
<label for="educationLevel" tabindex="1">Education:<select name="educationLevel" class="pie" id="educationLevel" onchange="myfunction();">
<option value="0">Select an option</option>
<option value="1">High School</option>
<option value="2">College</option>
<option value="3">Grad School</option>
</select></label>
<label for="quiz-applicantCountry" tabindex="1" id="yourself">YOUR COUNTRY OF BIRTH:<select name="applicantCountry" id="your-applicantCountry" class="pie" onchange="myfunction();">
<option value="0">Select a Country</option>
<option value="54">Afghanistan</option>
<option value="93">Albania</option>
...
<option value="52">Zambia</option>
<option value="53">Zimbabwe</option>
</select></label>
<label for="maritalStatus" tabindex="2" id="marital">Marital Status:<select name="maritalStatus" class="pie" id="maritalStatus" onchange="myfunction();">
<option value="0">select</option>
<option value="1">YES</option>
<option value="2">NO</option>
</select></label>
<label for="quiz-applicantCountry" tabindex="1" id="spouse">YOUR SPOUSE COUNTRY OF BIRTH:<select name="applicantCountry" id="spouse-applicantCountry" class="pie" onchange="myfunction();">
<option value="0">Select a Country</option>
<option value="54">Afghanistan</option>
...
<option value="52">Zambia</option>
<option value="53">Zimbabwe</option>
</select></label>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
</form>
Here is Javascript
function myfunction(){
var birthSelectedCountry = $("select#your-applicantCountry option:selected").val();
// console.log(birthSelectedCountry);
var country = "-" + birthSelectedCountry + "-";
var eligibleCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";
var birthSpouseSelectedCountry = $("select#your-applicantCountry option:selected").val();
// console.log(birthSpouseSelectedCountry);
var spouseCountry = "-" + birthSpouseSelectedCountry + "-";
var eligibleSpouseCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-";
var maritalStatus = $("select#maritalStatus option:selected").val();
// console.log(maritalStatus);
var marital = "-" + maritalStatus + "-";
var eligibleMarital = "-1-2-";
var educationLevel = $("#educationLevel option:selected").val();
var education = "-" + educationLevel + "-";
var eligibleEducationLevel = "-2-3-";
console.log(education);
console.log(marital);
console.log(country);
console.log(eligibleEducationLevel.indexOf(education));
console.log(eligibleMarital.indexOf(marital));
console.log(eligibleCountries.indexOf(country));
if( eligibleEducationLevel.indexOf(education) < 0 && eligibleCountries.indexOf(country) < 0 ) {
console.log("Are you married?");
// $('#marital').fadeIn();
$('#marital').css('display', "block");
}

Try this:
JAVASCRIPT
if ($("#educationLevel").val() == "1"){
$("#maritalStatus").show();
} else {
// Do something else..
}
This is if I understood the question correctly.

In your document.ready() event hide all the controls by referencing them by their ids. The document.ready() function is used to initialize the entire behaviour of the entire page.
$(document.ready(function(){
//hide the maritalStatus dropdown initially at pageload.
$('#maritalStatus').hide();
$('#spouse-applicantCountry').hide();
$('#maritalStatus').val(0);
$('#spouse-applicantCountry').val(0);
//This the onchange event of the select
$('#educationLevel').on('change', function() {
$('#maritalStatus').show();
//Put your conditions here
if($('#maritalStatus').val() == "1"){
$('#spouse-applicantCountry').show();
}
});
}));
The dropdown onChange functions wont work properly as expected as the select control is often rendered before the function is defined.
Hope this helps !
Cheers !

Change link on button with input from two dropdowns?

I have a button with a link that needs to change based on what the user selects from two dropdown menus.
I found this brilliant solution with one dropdown menu in here:
var sel = document.getElementById('basic_plan');
sel.onchange = function () {
document.getElementById("abc").href = this.value + ".html";
}
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="tri">3 Years - Rs. 100/month</option>
<option value="bi">2 Years - Rs. 200/month</option>
<option value="ann">1 Year - Rs. 100/month</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>
http://jsfiddle.net/MHh46/1/
However I need a solution where the output link is based on two dropdown menus. For example:
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="dropdown-plans2">
<select id="basic_plan2" name="bill_cycle2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
</div>
But how would the Javascript part look in order for this to work?
For example if you select option "1" from dropdown #1 and option "A" from dropdown #2 the button links to www.link1.com, if you select "2" and "A" it links to www.link2.com, 3A = www.link3.com, 1B = www.link4.com and etc.
I hope my question makes sense.
Kind regards. :-)

Change the drop downs so they both have the same class (class="dropdown-plans") and then you can tie a change event to both. When either is selected, the event will trigger, and combine the value of both selections, and then assign the result to the href.
JQuery
$('.dropdown-plans').change(function() {
var val = $('#basic_plan').val() + $('#basic_plan2').val();
$('#abc').prop('href',val);
});
JS Fiddle demo
UPDATE
Here is an updated fiddle showing how to assign a link based on the selectiosn made from the drop downs. With this approach, you will need to define the mapping between the various combinations possible with the dropdowns and the related link that should be assigned. I have only shown 2 combinations in the demo.

var sel = document.getElementById('basic_plan');
var sel2 = document.getElementById('basic_plan2');
if(sel.value){
sel2.onchange = function () {
document.getElementById("abc").href = sel.value+""+this.value + ".html";
}}
This part works only if the first -select- is set. Hope this helps.

Register an event handler that handles a change of any of your two dropdowns and gets the value of the selected options.
var sel = document.getElementById('basic_plan1');
var sel2 = document.getElementById('basic_plan2');
sel.onchange = dropdownChange;
sel2.onchange = dropdownChange;
function dropdownChange() {
var fd = document.getElementById("basic_plan1");
var sd = document.getElementById("basic_plan2");
var firstValue = fd.options[fd.selectedIndex].value;
var secondValue = sd.options[sd.selectedIndex].value;
document.getElementById("abc").href = firstValue + secondValue + ".html";
}
See this JSFiddle.

You can add change event to both selects, and build the url after any change
var basic_plan = document.getElementById("basic_plan");
var basic_plan2 = document.getElementById("basic_plan2");
function changeUrl() {
document.getElementById("def").innerHTML = "www.site.com/" + basic_plan.value + basic_plan2.value;
}
<div class="dropdown-plans">
<select id="basic_plan" name="bill_cycle" onchange="changeUrl()">
<option value="tri">3 Years - Rs. 100/month</option>
<option value="bi">2 Years - Rs. 200/month</option>
<option value="ann">1 Year - Rs. 100/month</option>
</select>
</div>
<div class="dropdown-plans2">
<select id="basic_plan2" name="bill_cycle2" onchange="changeUrl()">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="something"> Order now </a>
<br/>
<span id="def"></span>
</div>

You can see my code below or this link for reference:
function GotoLink() {
var sel = $('.basic_plan option:selected').text();
var sel2 = $('.basic_plan2 option:selected').text();
alert('www.site.com/' + sel + '' + sel2 + '');
document.getElementById("abc").href = 'www.site.com/' + sel + '' + sel2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="dropdown-plans">
<select id="basic_plan" class="basic_plan" name="bill_cycle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="dropdown-plans2">
<select id="basic_plan2" class="basic_plan2" name="bill_cycle2">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="button-plans">
<a id="abc" href="#" onclick='GotoLink()'> Order now </a>
</div>

Using jQuery to change a dropdown menu when a checkbox is checked

i'm a bit confused about how to go about this problem. Currently when a user changes the "quantity" from the dropdown, it checks the checkmark, but when its moved to zero the checkmark is unchecked.
var val = 0
$('.drop').on('change',function() {
var val = $(this).val();
if(val > 0) {
var product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', true);
}
else {
var product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', false);
}
});
part of the form:
<input class='check' id='switchName0' type='checkbox'>
<label for='switchName0'></label>
</div>
<div class='col-lg-8'>
<input id="order_products__product_id" name="order_products[][product_id]" type="hidden" value="4" />
test
<br>
<div class='subheader'>$22.00</div>
</div>
<div class='col-lg-2'>
<select class="drop" data-cost-per-unit="2200" id="test" name="order_products[][quanity]" prodindex="0"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option></select>
</div>
</div>
</div>
</div>
</div>
I want to make it so if the checkmark is not checked and you check it, it changes the quantity to 1 and if you uncheck it, it goes to zero. But since I have this other jquery here, if i use $('.checkbox').on('change',fucntion(){} it will change every time the dropdown is moved. Whats a better solution to this problem?

The following code seems to work, from my tests on your fiddle. Both the checkbox and the select affect each other. This code assumes, as your code hints, that all checkboxes will have an id of the form switchName#, where # is a number.
Don't forget to change the 10 (switchName length) on your actual code to match your ids.
var $drops = $('.drop');
$('.check').on('change', function() {
var val = $(this).prop('checked'),
product = this.id.slice(10);
$drops.filter(function (i, e) {
return $(this).attr('prodindex') == product;
}).val(val ? '1' : '0');
});
$drops.on('change',function() {
var val = +(this.value),
product = $(this).attr("prodindex");
$('#switchName' + product).prop('checked', val > 0);
});

select first drop down to be the same value as the other drop down

I would like to select all drop down to be the same as the value selected from the primary dropdown. I got it to work if there is one select selected from the primary dropdown, but will not work if there are two selects, I have added some code below for your information.
HTML:
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown();">
<option value="" selected>Select Name</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
<select id="Qualifications" name="Qualifications">
<option value="select">select</option>
<option value="Pass">Pass</option>
<option value="Fail">Fail</option>
</select>
JavaScript:
function setDropDown() {
var index_name=document.QualificationForm.ForceSelection.selectedIndex;
document.QualificationForm.Qualifications.selectedIndex=index_name;
}

Try this
function setDropDown() {
var index_name =
document.getElementsByName('ForceSelection')[0].selectedIndex;
var others = document.getElementsByName('Qualifications');
for (i = 0; i < others.length; i++)
others[i].selectedIndex = index_name;
}

You could possibly use the following, though currently untested:
function setDropDown(el){
if (!el) {
return false;
}
else {
var index = el.selectedIndex,
selects = document.getElementsByName('qualifications');
for (var i=0, len=selects.length; i<len; i++){
selects[i].selectedIndex = index;
}
}
}
This requires that you pass the #ForceSelection select element into the function, and so is called like:
<select name="ForceSelection" id="ForceSelection" onChange="javascript:return setDropDown(this);">
<!-- other stuff -->
</select>
The selectedIndex of this passed-in element will be applied to the other select elements with the name of qualifications.
Also, please allow me to reiterate: an id must be unique within the document in order to be valid HTML.