CODEWITHSUNDEEP
javascripthtml
Hassan Chaudhry
Hassan Chaudhry

Reputation: 1

JavaScript Code Not Working

My java script code is not working, Currently when you select a value in the first drop down menu the second drop down menu becomes editable which is fine. But I want to make it as if when you select the option 'default' in the first drop down menu the second drop down menu reverts to 'default' and becomes disabled and read only, but if I select any other option other then 'default' the second menu should be editable.

    <html>
<head>
<script type="text/javascript">
function mySecondFunction() {
 var ddl = document.getElementById("1");
 var selectedValue = ddl.options[ddl.selectedIndex].value;
    if (selectedValue == "Default")
   {
    document.getElementById("mySelection").disabled = true;
   }else {
    document.getElementById("mySelection").disabled = false;
   }

}
</script>

</head>
<body>
<select  id="1" onchange="mySecondFunction()">
                <option value="OptionZero">Default</option>
                <option value="OptionOne">Car</option>
                <option value="OptionTwo">Car2</option>
                <option value="OptionThree">Car23</option>
</select>
<br>
<select disabled id="mySelection">
                <option value="OptionZero">Default</option>
                <option value="OptionOne">A</option>
                <option value="OptionTwo">B</option>
                <option value="OptionThree">C</option>
        </select>


</body>
</html>

Upvotes: -1

Views: 87

Answers (6)

Myth
Myth

Reputation: 446

Change your Script like this

function mySecondFunction() {
    if (document.getElementById("1").value == "OptionZero")
   {
    document.getElementById("mySelection").value="OptionZero";
    document.getElementById("mySelection").disabled = true;
   }else {       
    document.getElementById("mySelection").disabled = false;
   }
}

Here is Fiddle

Upvotes: 0

getty_advaanz
getty_advaanz

Reputation: 31

Please go through the following code.

   <html>
  <head>
  <script type="text/javascript">
  function mySecondFunction() {
  var ddl = document.getElementById("1");
  var selectedValue = ddl.options[ddl.selectedIndex].value;
 if (selectedValue == "OptionZero")
  {
  document.getElementById("mySelection").value="OptionZero";
  document.getElementById("mySelection").disabled = true;
  }else {
  document.getElementById("mySelection").disabled = false;
  }

 }
</script>
</head>
<body>
<select  id="1" onchange="mySecondFunction()">
            <option value="OptionZero">Default</option>
            <option value="OptionOne">Car</option>
            <option value="OptionTwo">Car2</option>
            <option value="OptionThree">Car23</option>
</select><br>
 <select disabled id="mySelection">
            <option value="OptionZero">Default</option>
            <option value="OptionOne">A</option>
            <option value="OptionTwo">B</option>
            <option value="OptionThree">C</option>
    </select>
</body>
</html>

Please change selectedValue == "Default" to selectedValue == "OptionZero" and add the following line in if condition document.getElementById("mySelection").value="OptionZero";

Hope it will help you.Thank you.

Upvotes: 0

4EACH
4EACH

Reputation: 2197

You have mistake with the value, this is the answer:

function mySecondFunction() {
  var ddl = document.getElementById("1");
  var selectedValue = ddl.options[ddl.selectedIndex].value;
  document.getElementById("mySelection").disabled = selectedValue === "OptionZero"?true:false;
}

Upvotes: 0

yunandtidus
yunandtidus

Reputation: 4096

You need to use value OptionZero and not the Label Default, and set the value back in "mySelection"

if (selectedValue == "OptionZero")
{
    document.getElementById("mySelection").disabled = true;
    // set the value to default
    document.getElementById("mySelection").value = "OptionZero"
} else {
    document.getElementById("mySelection").disabled = false;
}

Upvotes: 0

Amit
Amit

Reputation: 15387

Try as 

function mySecondFunction() {
  var ddl = document.getElementById("1");
  var selectedValue = ddl.options[ddl.selectedIndex].value;
  if (selectedValue == "OptionZero")
    {
     document.getElementById('mySelection').selectedIndex = 0;
      document.getElementById("mySelection").disabled = true;
   }else {
    document.getElementById("mySelection").disabled = false;
   }

}

OR CAN WE TRY AS

function mySecondFunction() {
 var ddl = document.getElementById("1");
 var selectedValue = ddl.options[ddl.selectedIndex].text;
    if (selectedValue == "Default")
   {
    document.getElementById('mySelection').selectedIndex = 0;
    document.getElementById("mySelection").disabled = true;
   }else {
    document.getElementById("mySelection").disabled = false;
   }

}

DEMO2

Demo

UPDATE DEMO

Upvotes: 0

Jan Sverre
Jan Sverre

Reputation: 4733

You should write 

if(selectedValue == "OptionZero") {

It is the value attribute which set the value on an element.

Upvotes: 0

Related Questions