javascript - 我如何使用 .click on an <option>

标签 javascript jquery html

我是 JavaScript 的新手,我不明白为什么这行不通。我的 friend 说尝试使用 .click.select 来测试对选项的点击,但它们都不起作用。

我的 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>

我的 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();
     });
 });

这是它的 fiddle 的链接:http://jsfiddle.net/a2nw2sus/1/

最佳答案

<option> 那样不行。收听 change <select> 相反:

$('#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;
        }
    }
});

http://jsfiddle.net/a2nw2sus/2/我修复了拼写错误( click()Click() ),你看:它在 Chrome 中不起作用。在 Firefox 中它可以工作,但您不能认为这是理所当然的!

关于javascript - 我如何使用 .click on an <option>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33552131/

相关文章:

javascript - 如何使用 Javascript 将字典列表解析为 JSON 格式?

javascript - 覆盖背景被其他元素覆盖

javascript - Highcharts 颜色不显示

javascript - JS : there is a new operator "=>"

jquery - 本地主机中的 WordPress slider url 问题

jquery - Html.ValidationMessageFor 带有图像和工具提示

javascript - 两个相等的 50% 宽度列全高

javascript - 在 HTML 文件中包含另一个 HTML 文件

php - 混合javascript和php

javascript - 从索引位置向后查找字符串中的空格