CODEWITHSUNDEEP
javascriptjqueryhtml
Ijal Mamen
Ijal Mamen

Reputation: 19

how to disable <select> based on user selection in another <select>

i have two <select>, named category and category_sport

i want <select name='category_sport'> disable , if i click <option>sport</option> in <select name='category'> , i want enable <select name='category_sport'>

Anyone have an idea how ? 

function disable()
    {
        document.getElementById("katOl").disabled=true;
    }
function enable()
    {
        document.getElementById("katOl").disabled=false;
    }

the script above is used in <option> ex:

<select name='category'>
  <option value="1" onclick='enable()' >sport</option>

</select>



<select id='katOl' name='category_sport'>
    <option value="1">Football</option>

 </select>

but isn't work

Upvotes: 1

Views: 187

Answers (8)

Reza Mamun
Reza Mamun

Reputation: 6189

Here is my solution:

HTML:

<select name="category" onchange="alterSelection(event)">
    <option value="">----</option>
    <option value="1">Sport</option>
    <option value="2">Food</option>
</select>

<select id="katOl" name="category_sport" disabled="disabled">
    <option value="1">Football</option>
    <option value="2">Cricket</option>
</select>

JS:

function alterSelection(e){
    if( e.target.selectedIndex==1 ){
        document.getElementById("katOl").disabled=false;
    }else{
        document.getElementById("katOl").disabled=true;
    }
}

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206525

A much simpler and fun approach:

LIVE DEMO

<select name='category'>
  <option>Sport</option>
  <option>Food</option>
  <option>Travel</option>
</select>

<select name='category_sport'>
  <option>Football</option>
</select>

<select name='category_food' disabled>
  <option>Pizza</option>
</select>

<select name='category_travel' disabled>
  <option>Croatia</option>
</select>

jQuery:

$('select[name=category] option').click(function(){
  var val = this.value.toLowerCase(); // "Sport" >> "sport"
  $('select[name^=category_]').prop('disabled', 1); // Disable all
  $('select[name=category_'+ val +']').prop('disabled', 0); // Enable
});

Upvotes: 0

jingyinggong
jingyinggong

Reputation: 646

HTML CODE:

<select name='category' id="category">
  <option value="1">sport</option>
  <option value="2">education</option>
</select>
<select id='katOl' name='category_sport'>
  <option value="1">Football</option>
</select>

js Code:

(function(){
    var cat = document.getElementById('category'),
        katOl = document.getElementById('katOl');
    cat.onchange = function() {
      var v = cat.value;
      if(v === '1') {
          katOl.setAttribute('disabled', 'disabled');
      } else {
          katOl.removeAttribute('disabled');
      }
    }
})();

Upvotes: 0

cwang
cwang

Reputation: 1104

use onChange event of select tag instead.

<select onChange="set_sport_cat(this)">
<option value="1">sport</option>
<option value="2">whatever</option>
</select>

function set_sport_cat(my){
    alert("test");
    if(my.options[0].selected){
        alert("1");
    }else{
        alert("2");
    }
}

http://jsfiddle.net/3A6X4/

Upvotes: 0

Dhanu Gurung
Dhanu Gurung

Reputation: 8860

You can try this:

$(document).ready(function(){
  $('select[name=category]').change(function(){
    if($(this).val() === '1'){
      $('#katOl').prop('disabled', false);
    } else {
      $('#katOl').prop('disabled', true);
    }
  });
});

DEMO Link

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10906

try something like this

javascript

function check(val)
{
    if(val == '1'){
        document.getElementById("katOl").disabled=true;
    }else{
        document.getElementById("katOl").disabled=false;
    }
}

html

<select name='category' onchange="check(this.value)">
        <option value="" >SELECT</option>
        <option value="1" >sport</option>
</select>

Upvotes: 2

G&#252;ven Altuntaş
G&#252;ven Altuntaş

Reputation: 253

try like this 

$("#category").change(function(){
  if($(this).val()=="yourvalue"){
    disable();
  }else{
    enable();
  }
});

Upvotes: 0

Voltrone
Voltrone

Reputation: 291

assuming that your looks like this :

<select name='category_sport' id="katOl"> ... </select>

HTML:

<select id="myselect" name='category' onchange="changeSelect()">
  <option value="1">sport</option>
</select>

Javascript:

function changeSelect(){
var mySelect = document.getElementById("myselect");
var selectedValue = e.options[myselect.selectedIndex].value;
if(selectedValue=="1") //sport
 {
   document.getElementById("katOl").disabled=false;
 }
}

Upvotes: 0

Related Questions