JavaScript Tutorials
- What is Javascript?
- What is BOM?
- What is DOM?
- Variable
- check variable value is empty
- JavaScript Output
- Functions
- Javascript Events
- Input Events
- onchange Event
- Javascript Output methods
- If else statement
- Arrays
- Pattern Validation
- Form Validation
- Inner Html Form Validation
- Inline Form Validation
- Checkbox Validation
- Inline Inner Html Form Validation
- Server side php Validation
- Validate a HTML Form with PHP
- window and window location
- Get Text Value
- Get hidden field value
- JavaScript & PHP
- Date Format
- get php value in javascript
- Redirect page & Autoredirect page
- Auto Refresh page & Div
- How to get select text value from Dropdown box
- How to clear browser history in javascript
- Checkbox Problems
- Select option problems
- Popup Contact Form
- Sidebar Contact Form
- How to use a multistep Form or Form wizard
- Auto Calculate Price
- print Application Form
- Auto Calculate GST in Javascript by select price
- Calculate GST by input value in text box Jquery
- Calculate Discount
- onClick Checkbox
- autofil form data click on checkbox
- Show subcategory list
- Show city list as per state
- Show district list as per country and state
- Show good morning good night wish
- image upload with preview image
- Print Div Content
- Show modal popup on page load
- filter table data usign javascript.
- Character Limit Validation.
- Validate File 5MB Upload
- Validate Special character
- More File Upload
- Call JavaScript Function After Page Load
- Drop Down First option Value Disabled --- Please Select ---
- How to Disable Submit Button After Form Submission
- How to disable browser back button using Jquery?
- How to Remove selected item from second & third dropdown list?
- Interview Questions of JavaScript.
Important Link
How to Remove selected item from second & third dropdown list?
Example
File name : index.php
<select id="first_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>
<select id="second_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>
<select id="third_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>
<select id="fourth_choice">
<option>Val1</option>
<option>Val2</option>
<option>Val3</option>
<option>Val4</option>
</select>
File name : index.php
<script>
$(document).ready(function(){
// Enumerate all lists
var Lists = [
document.getElementById("first_choice"),
document.getElementById("second_choice"),
document.getElementById("third_choice"),
document.getElementById("fourth_choice"),
],
nbLists = Lists.length;
// Binds change events to each list
for(var iList = 0; iList < nbLists; iList++) {
Lists[iList].onchange = RemoveItems(iList);
}
function RemoveItems(iList) {
return function() {
var value = [];
// Add the selected items of all previous lists including the one changed
for(var jList = 0; jList <= iList; jList++) value.push(Lists[jList].options[Lists[jList].selectedIndex].text);
// Hide in all succeeding lists these items
for(var kList = iList + 1; kList < nbLists; kList++)
HideItems(kList, value);
}
}
// Hide items selected in previous lists in all next lists
function HideItems(iList, value) {
var nbOptions = Lists[iList].options.length,
nbValues = value.length,
found;
if(nbValues === 0) return;
for(var iOption = 0; iOption < nbOptions; iOption++) {
// Find if this element is present in the previous lists
found = false;
for(var iValue = 0; iValue < nbValues; iValue++) {
if(Lists[iList].options[iOption].text === value[iValue]) {
found = true;
break;
}
}
// If found, we hide it
if(found) {
Lists[iList].options[iOption].style.display = "none";
Lists[iList].options[iOption].selected = "";
}
// else we un-hide it (in case it was previously hidden)
else
Lists[iList].options[iOption].style.display = "";
}
}
});
</script>
File name : index.php