javascript-如何使用。单击<;选项>;

javascript-如何使用。单击<;选项>;,javascript,jquery,html,Javascript,Jquery,Html,我对JavaScript相当陌生,我不明白为什么这不起作用。我的朋友说试着使用。点击或。选择来测试点击选项,但它们中没有一个起作用 我的html: <body> <form>General <hr>Full Name: <br> <input Type="text" name="name"> <br>Gender: <br> <input type="radi

我对JavaScript相当陌生,我不明白为什么这不起作用。我的朋友说试着使用
。点击
。选择
来测试点击选项,但它们中没有一个起作用

我的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>
$(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();
     });
 });
这里有一个指向它的链接:

不是这样工作的。请改为在中收听:

在中,我修复了拼写错误(
click()
vs
click()
),并且注意:它在Chrome中不起作用。在Firefox中,它是有效的,但你不能认为这是理所当然的

不是这样的。请改为在中收听:


在中,我修复了拼写错误(
click()
vs
click()
),并且注意:它在Chrome中不起作用。在Firefox中,它是有效的,但你不能认为这是理所当然的

您没有像以前那样选择选项。你应该给你的
select
菜单一个参考(ID/class/name),然后选择它

<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>
或者,您可能希望在检测到更改后获取
select
的值:

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

您没有像以前那样选择选项。你应该给你的
select
菜单一个参考(ID/class/name),然后选择它

<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>
或者,您可能希望在检测到更改后获取
select
的值:

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

在浏览器的控制台中会出现哪些错误?您是否包括jQuery<代码>单击
应该是
单击
,因为JavaScript区分大小写。另外,您通常绑定在select元素上,而不是选项上。@j08691谢谢!现在可以工作了:)!在浏览器的控制台中会出现哪些错误?您是否包括jQuery<代码>单击
应该是
单击
,因为JavaScript区分大小写。另外,您通常绑定在select元素上,而不是选项上。@j08691谢谢!现在可以工作了:)!我发现问题在于我的点击中有一个大写字母“C”。感谢@j08691指出这一点!请看我的补充意见。它至少在Chrome中不起作用。你能发布一个JSFIDLE的my html并添加你的答案吗?:)ps谢谢你的帮助,否则我就得向你收取我平时懒惰的费用仅将原始代码的函数体复制并粘贴到
//do something
//do something
中。所有的逻辑都已经存在于代码中,所以这应该是最简单的任务了。哦,你知道如何在移动设备上工作吗?我发现问题是我的点击中有一个大写字母“C”。感谢@j08691指出这一点!请看我的补充意见。它至少在Chrome中不起作用。你能发布一个JSFIDLE的my html并添加你的答案吗?:)ps谢谢你的帮助,否则我就得向你收取我平时懒惰的费用仅将原始代码的函数体复制并粘贴到
//do something
//do something
中。所有的逻辑都已经存在于代码中,所以这应该是最简单的任务了。哦,你也知道如何在移动设备上工作吗?