CODEWITHSUNDEEP
javascriptjqueryhtml
Jackson t
Jackson t

Reputation: 23

javascript - How do i use .click on an <option>

I'm fairly new to JavaScript and I cant figure out why this won't work. My friend said to try use .click or .select to test for a click on the option but nether of them worked.

My html:

<body>
<form>General
    <hr>Full Name:
    <br>
    <input Type="text" name="name">
    <br>Gender:
    <br>
    <input type="radio" Name="gender" value="Male">Male
    <input Type="radio" name="gender" value="female">Female
    <br>Birthday:
    <br>
    <input type="text" name="bday" placeholder="mm/dd/yy">
    <br>Email Adress:
    <br>
    <input type="text" name="email">
    <br>PayPal address:
    <br>
    <input type="text" name="PayPal" placeholder="for when we start paying staff">
    <br>Short Biography:
    <br>
    <textarea rows="4" cols="50"></textarea>
    <br>
    <br>Apply:
    <hr>Username:
    <br>
    <input type="text" name="nick" placeholder="Your Ingame Name">
    <br>What Rank Are You Applying For:
    <br>
    <select>
        <option id="Dev" value="Developer">Developer</option>
        <option id="Headadmin" value="HeadAdmin">Head Admin</option>
        <option id="Headmod" value="HeadMod">Head Modetator</option>
        <option id="Headbuilder" value="HeadBuilder">Head Builder</option>
        <option id="admin" value="Admin">Admin</option>
        <option id="mod" value="Moderator">Moderator</option>
        <option id="builder" value="Builder">Builder</option>
    </select>
    <br>Why do WE want you (Rank you picked above):
    <br>
    <textarea rows="4" cols="50"></textarea>
    <br>How Many Hours Can You Be On a day:
    <br>
    <input type="text" name="day">
    <br>how many days can you be on a week:
    <br>
    <input type="text" name="week">
    <br>have you been staff before?
    <br>
    <select>
        <option value="yes">yes
            <option value="no">no</select>
    <br>Test:
    <hr>
    <div id="DevTest">Devtest</div>
    <div id="admintest">admin test</div>
    <div id="modtest">mod test</div>
    <div id="HAtest">head admin test</div>
    <div id="HMtest">head mod test</div>
    <div id="HBtest">headbuilder test</div>
    <div id="buildertest">buildertest</div>
    <br>
    <hr>
    <textarea readonly rows="5" cols="30">Staff Contract: ---------------- 1. As a staff member, YOU, are represent the "Piggalot Gaming Network" both online and offline. this means; A. If WE, The "Piggalot Gaming Network" Community,</textarea>
    <hr>
    <input type="checkbox" value="test" required>by clicking this you agree to the staff contract
    <br>
    <input type="reset">
    <input type="submit" value="Send Application">
</form>

My JavaScript:

$(document).ready(function(){
    $("#Dev").Click(function(){
        $("#DevTest").show();
        $("#HAtest").hide();
        $("#HMtest").hide();
        $("#HBtest").hide();
        $("#admintest").hide();
        $("#modtest").hide();
        $("#buildertest").hide();
     }); 
    $("#Headadmin").Click(function(){
        $("#HAtest").show();
        $("#DevTest").hide();
        $("#HMtest").hide();
        $("#HBtest").hide();
        $("#admintest").hide();
        $("#modtest").hide();
        $("#buildertest").hide();
     });
 });

Here the link to a Fiddle of it: http://jsfiddle.net/a2nw2sus/1/

Upvotes: 1

Views: 62

Answers (2)

TheCarver
TheCarver

Reputation: 19723

You don't select options like you have. You're meant to give your select menu a reference (ID/class/name) and select that instead.

<select id="mySelectMenu">
    <option value="Developer">Developer</option>
    <option value="HeadAdmin">Head Admin</option>
    <option value="HeadMod">Head Modetator</option>
    <option value="HeadBuilder">Head Builder</option>
    <option value="Admin">Admin</option>
    <option value="Moderator">Moderator</option>
    <option value="Builder">Builder</option>
</select>

If you just want to detect a click on the select:

$('#mySelectMenu').click(function() {
    var currentValue = $(this).find(":selected").val();
    console.log("The current selected option is "+ currentValue +".");
});

or maybe you want to get value of the select after a change was detected:

$('#mySelectMenu').on('change', function() {
    var selectedValue = $(this).val();
    if (selectedValue === "Dev") {
        $("#DevTest").show();
        $("#HAtest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
    } else if (selectedValue === "HeadAdmin") {
        $("#HAtest").show();
        $("#DevTest, #HMtest, #HBtest, #adminTest, #modtest, #buildertest").hide();
    }
});

Upvotes: 0

Kijewski
Kijewski

Reputation: 26043

<option> does not work that way. Listen for a change in <select> instead:

$('#id_for_your_select').change(function () {
    var selected_value = $(this).val();
    switch (selected_value) {
        case 'Developer': {
            // do something
            break;
        }
        case 'HeadAdmin': {
            // do something else
            break;
        }
    }
});

In http://jsfiddle.net/a2nw2sus/2/ I fixed the spelling error (click() vs Click()), and lo: it does not work in Chrome. In Firefox it works, but you must not take this for granted!

Upvotes: 4

Related Questions