.show（）不工作

这里是我的代码：.show（）不工作

<script type="text/javascript"> 
$('#reqtype').on('change', function() { 
    if ($(this).val() === "Edit") { 
    $("#crtype").show() 
    } else { 
    $("#crtype").hide() 
    } 
}); 
$('#crtypes').on('change', function() { 
    if ($(this).val() === "editrule") { 
    $("#ruletitle").show(); 
    } else if ($(this).val() === "addrule") { 
    $("#ruletitle").show(); 
    } else { 
    $("#ruletitle").hide() 
    } 
}); 
</script>

这里是我的html：

<body> 
<div> 
    <label>Request Type*:</label> 
    <select name="reqtype" id="reqtype" required tabindex="4"> 
    <option value="">- Select Request Type -</option> 
    <option value="Create">Create</option> 
    <option value="Edit">Edit</option> 
    </select> 
    <br/> 
    <br/> 
</div> 
<div> 
    <label>Assignment Profile ID 
    <br/><span style="font-weight:normal; font- 
     style:italic">(Leave blank if requesting new Assignment Profile)   
     </span>:</label> 
    <input name="assignmentid" size="50" tabindex="5" type="text" class="w250" /> 
    <br/> 
    <br/> 
</div> 
<div id="crtype" style="display:none;"> 
    <label for="changerequesttype">Change Request Type</label> 
    <select name="crtypes" id="crtypes"> 
    <option>Choose Request Type</option> 
    <option value="addrule">Add Rule</option> 
    <option value="editrule">Edit Rule</option> 
    <option value="addcontent">Add Content</option> 
    <option value="editcontent">Edit Content</option> 
    </select> 
    <br/> 
    <br/> 
    <div id="ruletitle" style="display:none;"> 
    <label>Rules (Rule Title):</label> 
    <input name="ruletitle" size="50" tabindex="5" type="text" class="w250" /> 
    <br/> 
    <br/> 
    <label>Rules (Attribute):</label> 
    <select name="ruleattribute" id="ruleattribute" tabindex="8"> 
     <option value="">- Select Attribute -</option> 
     <option value="Business Group">Business Group</option> 
     <option value="Business Unit">Business Unit</option> 
     <option value="Business Value Center">Business Value Center</option> 
     <option value="Company Code">Company Code</option> 
     <option value="Customer Code">Customer Code</option> 
     <option value="Employee ID">Employee ID</option> 
     <option value="Function">Function</option> 
     <option value="Is People Leader?">Is People Leader?</option> 
     <option value="Job Family">Job Family</option> 
     <option value="Job Grade">Job Grade</option> 
     <option value="Address">Address</option> 
     <option value="Alternate Job Code ID">Alternate Job Code ID</option> 
     <option value="City">City</option> 
     <option value="Country">Country</option> 
     <option value="Domain ID">Domain ID</option> 
     <option value="Employee Status ID">Employee Status ID</option> 
     <option value="Employee Type ID">Employee Type ID</option> 
     <option value="Is Full-Time">Is Full-Time</option> 
     <option value="Hire Date">Hire Date</option> 
     <option value="Hire Month">Hire Month</option> 
     <option value="Is Supervisor">Is Supervisor</option> 
     <option value="Item Completion">Item Completion</option> 
     <option value="Job Location ID">Job Location ID</option> 
     <option value="Job Code ID">Job Code ID</option> 
     <option value="Organization ID">Organization ID</option> 
     <option value="Postal Code">Postal Code</option> 
     <option value="Region ID">Region ID</option> 
     <option value="Regular/Temp">Regular/Temp</option> 
     <option value="State">State</option> 
     <option value="User ID">User ID</option> 
     <option value="Supervisor ID">Supervisor ID</option> 
     <option value="Plant ID">Plant ID</option> 
     <option value="Sub Function">Sub Function</option> 
     <option value="Vendor Code">Vendor Code</option> 
    </select> 
    <br/> 
    <br/> 
    <label>Rules (Operator):</label> 
    <select name="ruleoperator" id="ruleoperator" tabindex="8"> 
     <option value="">- Select Operator -</option> 
     <option value="Contains">Contains</option> 
     <option value="Does Not Contain">Does Not Contain</option> 
     <option value="Does Not Match">Does Not Match</option> 
     <option value="Does Not Start With">Does Not Start With 
     </option> 
     <option value="Matches">Matches</option> 
     <option value="Is Empty">Is Empty</option> 
     <option value="Is Not Empty">Is Not Empty</option> 
     <option value="Starts With">Starts With</option> 
    </select> 
    <br/> 
    <br/> 
    <label>Rules (Value):</label> 
    <input name="rulevalue" size="50" tabindex="5" type="text" class="w250" /> 
    <br/> 
    <br/> 
    </div> 
</div> 
</body>

这里是我的问题：当我选择 “编辑：” 从我的首次下降下拉列表中，它应显示“更改请求类型”。如果我从该下拉列表中选择“添加”或“编辑规则”，则应显示接下来的3个字段。这适用于JSFiddle。 My practice code

当我将代码放回到较大的页面时，它失败。所以我把它分解到这里看到的最低限度的代码，它仍然无法工作。我错过了什么？

来源

2017-06-01 abaragar

你**必须**包括jQuery库来使用jquery函数。我的HTML中没有看到jquery脚本。你*做* jQuery链接在jsfiddle ....这就是为什么它在那里工作。 – Scott

我已在您的建议和@ B1ll建议下面添加以下行：我把它放在我的第一个脚本行之前，它仍然不起作用 – abaragar

.....你有没有jQuery的”脚本“目录？你必须*链接到jQuery库*。如果“scripts”目录中没有jquery库，那么'src'属性的路径将不起作用。 – Scott

您需要先加载jQuery，然后才能使用jQuery $函数。 jQuery被包含在JSFiddle中，这就是为什么你的JavaScript运行在那里。

你的第一个<script>前补充一点：

<script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script>

来源

2017-06-01 20:17:09 B1ll

我用你的链接，如上所述，没有运气。我已经下载了3.2.1文件，将其放入我的脚本目录，并将其链接到我的代码中，但仍然失败。任何其他想法？提前致谢。 – abaragar

在这种情况下，我会在浏览器中打开开发人员工具，进入控制台并输入'$（document）'。如果出现'[document，context：document]'之类的东西，那么jQuery被加载。 – B1ll

我就开在你的浏览器的开发者工具，把断点和穿行其中。其中大多数快捷键是f12。在if（$（this）.val（）===“Edit”）处设置一个断点，然后当断点碰到它时突出显示$（this）.val（），然后右键单击并选择add to watch。它也会告诉你，如果Metis提出你没有链接到你的html中的任何jquery文件，因为你会得到一个jquery函数基本不存在的错误。

来源

2017-06-01 20:17:34 user2117229

尝试：

$.getScript("insert name of jquery file", function(){ 

    //do something simple with jQuery Here 

});

或

$(window).on('load', function() { 
    // do something simple with jQuery 
});

我想看看是否有你的文件有问题，因为它加载你的jQuery脚本后内这两个函数的代码应触发。此外，在库导入时尝试使用绝对路径，而不是相对路径，看看是否有助于解决这个问题

来源

2017-08-02 04:20:26

检查这些东西

是否有另一个元素具有相同的ID（reqtype）
包装下面的代码
将脚本放在页面底部（正文结束标记之前），并在代码之前调用jquery.js脚本。

$（文件）。就绪（函数（）{

$('#reqtype').on('change', function() { 
    //code 
}); 

$('#crtypes').on('change', function() { 
    //code 
});

}）;

来源

2017-08-02 04:45:56

.show（）不工作

回答

相关问题