CODEWITHSUNDEEP
jqueryhtml
user8292028
user8292028

Reputation:

Cant disable some particular options in a dropdown

I want to disable some particular options in my second dropdown i.e. id = "event" based on selection of the first dropdown list id="domain" . What I tried to do in here is that if I select Robotics from first dropdown menu then in the 2nd drop down menu options with class name B,C, F, G will be disabled. Here is my code:

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>

<form name = "myform">
Domain Name: &nbsp; <select name="domaindrop" id="domain">
                                <option value="">--- Please select ---</option>
                                <option value="Robotics" selected="selected">Robotics</option>
                                <option value="Coding">Coding</option>
                                <option value="Gaming">Gaming</option>
                                <option value="General Events">General</option>

                            </select><br><br>

        <input type="submit" name="submit" class="button" value="CHECK EVENT LIST" onclick ="validate()">

        Event Name: &nbsp; <select name="eventdrop" id = "event">
                                <option value="">--- Please select ---</option>
                                <option class="A" value="A">A</option>
                                <option class="B" value="B">B</option>
                                <option class="C" value="C">C</option>
                                <option class="D" value="D">D</option>
                                <option class="E" value="E">E</option>
                                <option class="F" value="F">F</option>
                                <option class="G" value="G">G</option>
                                <option class="H" value="H">H</option>

                            </select><br><br>


    </form>

    <script >

        function validate(){
        if (document.myform.domaindrop.value == "") {

        document.myForm.domaindrop.focus();
        }
        else if(document.myform.domaindrop.value == "Robotics")
        {
            $('B').attr("disabled","disabled");
            $('C').attr("disabled","disabled");
            $('F').attr("disabled","disabled");
            $('G').attr("disabled","disabled");
        }
}

    </script>


</body>
</html>

No action is performed by this code.Please help me into this.

Upvotes: 0

Views: 55

Answers (3)

Jax Teller
Jax Teller

Reputation: 1467

You are submiting form directly with submit button. add : e.preventDefault() for prevent submit. Then some code in full jquery :

 $("form").submit(function(e) {
    e.preventDefault();
  if ($("#domain").val() == "") {

  } else if ($("#domain").val() == "Robotics") {
    $('.B, .C, .F, .G').attr("disabled","disabled");
  }
 })

jsfiddle: https://jsfiddle.net/xpvt214o/673259/

Upvotes: 0

Gary Thomas
Gary Thomas

Reputation: 2331

Working Codepen of explanation below.

You have a few problems, one that seems to be over looked here is:

<input type="submit" ...

A submit button inside a form automatically submits the form (refreshes / changes the page). That is resetting all your dropdown and select values. Change it to:

<input type="button" ...

Secondly as mentioned previously, remove classes from your select options, and instead we will use jQuery to select them using their actual values:

<select name="eventdrop" id="event">
    <option value="">--- Please select ---</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
</select>

And now for your jQuery, you had the right idea, but were simply selecting the domain name dropdown wrong:

function validate()
{
    var domainDropValue = $("#domain").val();

    if (domainDropValue === "")
    {
        $("#domain").focus();
    }
    else if(domainDropValue === "Robotics")
    {
        $('#event option[value=B]').attr("disabled", "disabled");
        $('#event option[value=C]').attr("disabled", "disabled");
        $('#event option[value=F]').attr("disabled", "disabled");
        $('#event option[value=G]').attr("disabled", "disabled");
    }
}

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You are missing . before the class name. It should be .B, .c and so on for class selector:

$('.B').attr("disabled", "disabled");
$('.C').attr("disabled", "disabled");
$('.F').attr("disabled", "disabled");
$('.G').attr("disabled", "disabled");

Upvotes: 0

Related Questions