Question

这是我的代码：

<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

当我将代码放回到我的较大页面时，它会失败。所以我把它剥离到这里看到的最小代码，它仍然无法正常工作。我错过了什么？

Answer 1

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

在您的第一个<script>：

之前添加此内容

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

更多详情：How to add jQuery code into HTML Page

Answer 2

我会在浏览器中打开开发人员工具并放置断点并逐步完成。在大多数快捷键中，快捷键为f12。在if（$（this）.val（）===＆＃34; Edit＆＃34;）处设置一个断点然后当你的断点点击它然后突出显示$（this）.val（）然后右键单击并选择add观看。它还会告诉您，如果Metis表示您的html中没有链接任何jquery文件，那么因为您将收到jquery函数基本不存在的错误。

Answer 3

尝试：

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

    //do something simple with jQuery Here

 });

或

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

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

Answer 4

检查这些事情

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

$（document）.ready（function（）{

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

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

}）;

.show（）无效

4 个答案: