我似乎无法获得咖啡脚本甚至开火。我的代码如下 - 我希望它将来会帮助某人。
问题:为什么咖啡脚本没有被解雇?
我想做什么
这是我的coffeescript:
## This bit works fine
jQuery ->
projects = $('#project_id').html() #Gets the project drop down elements
$('#client_id').change -> #If we change our client selection then:
client = $('#client_id :selected').text() # OBtain the client
options = $(projects).filter("optgroup[label='#{client}']").html() #Filter all projects by client
if options
$('#project_id').html(options) # redraw the drop down menu to show only projects by a specific client.
else
$('#project_id').empty()
#This is not firing for some reason ---------------->
$('#project_id').change ->
alert('hello')
buildings = $('#building_id').html()
project = $('#project_id :selected').text()
options1 = $(buildings).filter("optgroup[label='#{project}']").html()
if options1
$('#building_id').html(options1)
else
$('#building_id').empty()
以下是我的表格:
<%= form_for(@rate) do |f| %>
<%= render "shared/errors", object: @rate %>
<fieldset>
<ol>
<li class="required">
<%= 'client_id included' %>
<%= collection_select(:client, :client_id, Client.all, :id, :name, {include_blank: true}, html_options = {:id => 'client_id'} ) %>
</li>
<li class="required">
<%= "Now for the project" %>
<%= grouped_collection_select :building, :project_id, Client.all, :projects, :name, :id, :name, {include_blank: true}, html_options = {:id => 'project_id'} %>
</li>
<li class="required">
<%= "Now for the building" %>
<%= grouped_collection_select :rate, :building_id, Project.order(:name), :buildings, :name, :id, :name, {include_blank: true}, html_options = {:id => 'building_id'} %>
</li>
<!-- The bits in the middle are more or less superfluous '-->
</ol>
<p>
<%= f.submit %>
<%= link_to "Cancel", rates_path, class: 'button' %>
</p>
</fieldset>
<% end %>
HTML输出
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all" href="/assets/buildings.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/buildings_users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/clients.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/job_types.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/levels.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/projects.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/rates.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-d8a942e24537698777a64d6b68054e18e50999d296516c9493a2fd4e5d60af81.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-d885a0a66bd595c10edb24f8879f94e334d88be0730c4d7c7a7b57c731c09037.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/dataTables/jquery.dataTables.self-7311c6e43c663ee33d9337f66262109ff492bd7f4d6931ab91bf3e5d16996e4d.css?body=1" data-turbolinks-track="true" />
<script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.turbolinks.self-176b9819f30444d441e820bbccd3264fe57753aeafd54dec732b0dbc77129a2a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/dataTables/jquery.dataTables.self-f520d04a662abc3bbb379438d969df199552297a55b74651a9e2b33b775df3ed.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/cocoon.self-6874ad698cefd21cc1119b773550f61b5c1a60396460f015222af59293affe80.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/buildings.self-3459e57b18d5a1aa4a87df1e247d6e79661ece4c5393a0eaefe33c7aa2bbd4f7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/buildings_users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/clients.self-63aba6d2aaa54e15667299e2c02a9048af4b8ccc2a466875187772656308d251.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/job_types.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/levels.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/projects.self-9e4e52aed79a76394e24a14f669c14567fe2dd8743d9823305ca453005602d2c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/rates.self-3dc44bfaec2fed1ef3dcafb28d086bd17a05da66443bb3162dabb4be4f325d3b.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-44dc72337fbefc4f8c73fc8781b922cf9e4f99f8d068e6563c3820851d9390f6.js?body=1" data-turbolinks-track="true"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="1tcpiwfep0X1hhR+sZdr41Kn9djZfkDt/Mi+UAWO8Tatv73vzGSnR1DPR7ccUxtATBLxjOTNBA1LfFLO9mPMPg==" />
</head>
<body>
<header id="page-header">
<div id="masthead">
<h1><a href="/">Home Page</a></h1>
<!--
<nav>
<p>
</p>
</nav>
-->
</div>
</header>
<div id="wrapper">
<div id="container">
<section id="sidebar">
<aside id="sidebar">
<nav>
<ul>
<li class="clients">
</li>
<li class="create-client">
</li>
</ul>
</nav>
</aside>
</section>
<section id="content">
<form class="new_rate" id="new_rate" action="/rates" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="ooJoSX4sk0TQ4ZxrqW24pxxQLBWXrcGL+A3J5jFZCo/Z6vwttZaTRnWoz6IEqcgEAuUoQaoehWtPuSV4wrQ3hw==" />
<fieldset>
<ol>
<li class="required">
client_id included
<select id="client_id" name="client[client_id]"><option value=""></option>
<option value="2">Safeway Precast</option>
<option value="3">Bianco Precast</option></select>
</li>
<li class="required">
Select Project
<select id="project_id" name="building[project_id]"><option value=""></option>
<optgroup label="Safeway Precast"><option value="5">world map house</option>
<option value="7">project2</option></optgroup><optgroup label="Bianco Precast"><option value="6">Test1</option></optgroup></select>
</li>
<li class="required">
Now for the building
<select id="building_id" name="rate[building_id]"><option value=""></option>
<optgroup label="Test1"><option value="19">test2</option></optgroup><optgroup label="project2"></optgroup><optgroup label="world map house"><option value="14">Asdf</option>
<option value="15">351</option>
<option value="16">350</option>
<option value="17">350</option>
<option value="18">X</option></optgroup></select>
</li>
<li class="required">
<label for="rate_rate">Rate</label>
<input autofocus="autofocus" type="number" name="rate[rate]" id="rate_rate" />
</li>
<li class="required">
<label for="rate_job_type">Job type</label>
<select name="rate[job_type]" id="rate_job_type"><option value="1">Detailing Redraw</option>
<option value="2">Tracing</option>
<option value="3">Mark up Updation</option></select>
</li>
<li class="required">
<label for="rate_note">Note</label>
<textarea cols="80" rows="15" name="rate[note]" id="rate_note">
</textarea>
</li>
<!-- and now let's try and dynamically select our building'-->
</ol>
<p>
<input type="submit" name="commit" value="Create Rate" />
<a class="button" href="/rates">Cancel</a>
</p>
</fieldset>
</form>
</section>
</div>
</div>
<footer id="page-footer">
<p>
Copyright © 2016 Advanced Bboi Productions
<a href="http://www.tek1.com.au">Tek1</a>
</p>
<p>
For invoicing purposes only.
</p>
</footer>
</body>
</html>
知道问题出在哪里?任何有用的帮助:
这是第三个选择菜单,见下文,它根据前面两个菜单所做的选择菜单选项拒绝改进,这让我感到悲伤。选择客户端后,下一个选择菜单项目将根据选择的客户端显示精确菜单。现在我需要根据选择的项目来改进下一个菜单,但它没有这样做。任何协助非常感谢。在任何情况下,当我得到它时,我会将代码发布到完整的解决方案。
<select id="building_id" name="rate[building_id]"><option value=""></option>
<optgroup label="Test1"><option value="19">test2</option></optgroup><optgroup label="project2"></optgroup><optgroup label="world map house"><option value="14">Asdf</option>
<option value="15">351</option>
<option value="16">350</option>
<option value="17">350</option>
<option value="18">X</option></optgroup></select>
答案 0 :(得分:0)
我有三个下拉菜单。我希望通过在第一个菜单中进行的选择来过滤第二个,并且我希望第三个按照第二个中的选择进行过滤(并且暗示第一个,间接地)。这里出现的问题是,当选择客户端(第一个菜单)时,项目菜单会被过滤(即第二个菜单),但此过滤过程不会在菜单上触发更改事件,这将随后过滤第三个菜单。所以我更改了代码以强制人们进行选择 - 因为初始选择现在是空白的。
这是我的新代码
jQuery ->
projects = $('#project_id').html()
$('#client_id').change ->
client = $('#client_id :selected').text()
options = $(projects).filter("optgroup[label='#{client}']").html()
$('#project_id option').remove()
if options
$('#project_id').html(options)
$('#project_id').val('')
else
$('#project_id').empty()
jQuery ->
buildings = $('#building_id').html() # gets the buildings sub-sub-list elements
$('#project_id').change -> # when the parent list changes then trigger:
project = $('#project_id :selected').text() # select what the parent project is
options1 = $(buildings).filter("optgroup[label='#{project}']").html() # filter the buildings by parent
$('#building_id option').remove() #clears the building element
if options1
$('#building_id').html(options1) # applies changes to selection based on parent
$('#building_id').val('')
else
$('#buidling_id').empty() #show nothing if empty