How to disable the value of Combobox in javascript ?

RajanV
Member • Sep 21, 2014

How to disable the value of Combobox in javascript ?

Hi I need some help. I have three comboboxes :

Each combobox have following values to select :

Combobox 1:
English
French
Spanish
Italian

Combobox 2:
English
French
Spanish
Italian

Combobox 3:
English
French
Spanish
Italian

When the values are selected in Combobox 1 let's say English, then this value is to be disabled in Combobox 2 & 3 both. I want to do this in javascript. can any body help.

Thanks in advance

Replies

Howdy guest!

Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.

Replies

simplycoder

Member • Sep 22, 2014

Show us what have you tired.
Also please clarify if you want it to disable the value or remove it from combo box.

Are you sure? This action cannot be undone.
Cancel
Prasad Ajinkya

Member • Sep 24, 2014

Prepopulate the language strings in an array
On change of the first dropdown/selelct, empty the 2nd and 3rd dropdown and populate them with all strings except the one in the 1st.

Are you sure? This action cannot be undone.
Cancel

RajanV

Member • Sep 24, 2014

Sorry for the late reply. I tried this code. Could any one help me out of this now. Because i not getting how would i get into this ...

<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 
  <script type="text/javascript">
 
  function selectedLanguage(lang,comboxbox_id){
 
  console.log(comboxbox_id);
 
  var langSelected = lang.options[lang.selectedIndex].value;
  console.log(langSelected);
 
  if(comboxbox_id === 'language1'){
 
  if(langSelected === 1){
  //do nothing
  document.getElementById('language2').style.disabled = true;
 
  }else if(langSelected === 2){
 
  }
 
  }else if(comboxbox_id === 'language2'){
  if(langSelected === 1){
  //do nothing 
 
  }else if(langSelected === 2){
 
  }
  } 
  }
 
  </script>
 
  </head>
  <body>
 
  <select name="language1" id="language1" onchange="selectedLanguage(this,this.id)">
 
  <option value="1">Disabled</option>
  <option value="2">English US</option>
  <option value="3">Greek</option>
  <option value="4">Swedish</option>
 
  </select>
 
 
  <select name="language2" id="language2" onchange="selectedLanguage(this,this.id)">
 
  <option value="1">Disabled</option>
  <option value="2">English US</option>
  <option value="3">Greek</option>
  <option value="4">Swedish</option>
 
  </select>
 
  </body>
</html>

Are you sure? This action cannot be undone.

Cancel

Manashree Thokal

Member • Sep 26, 2014

Did you check if there are any js errors on the browser?

Debug using F12 button on browser.

Are you sure? This action cannot be undone.
Cancel
Anoop Kumar

Member • Sep 26, 2014

Try this.. #-Link-Snipped-#
I got little time and did this. but it's not full.
You can disable the drop down after selecting it and if user want to select again. add a reset button to reset all the drop-down. I think it should be fine after that.

Are you sure? This action cannot be undone.
Cancel