任务: 根据第一个列表中的选项动态创建第二个选择列表。出于测试目的，我附上了简单的场景。
HTML:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select[name='optionone']").on('change',function(){
var option = $("select[name='optionone']").val();
jQuery.ajax({
type: "GET",
url: "data.php",
data: "option="+option,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
$('#ajaxcall').on('change', function(){
$("select[name='optiontwo']").on('change', function () {
var optionone = $("select[name='optionone']").val();
var optiontwo = $("select[name='optiontwo']").val();
console.log(optionone +'|||'+ optiontwo)
$.ajax({
type: "GET",
url: "data.php",
data: "optionone="+optionone+"&optiontwo="+optiontwo,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
});
});
</script>
</head>
<body>
Option one:
<select name="optionone">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
<div id="ajaxcall" style="display:none">
</div>
</body>
</html>
DATA.php
Option two:
<select name="optiontwo">
<option value="5">Option 5</option>
<option value="6">Option 6</option>
<option value="7">Option 7</option>
<option value="8">Option 8</option>
</select>
<?php var_dump($_GET) ?>
问题:
名为 optiontwo 的第二个列表将按应有的方式附加。但是，当我现在从中选择选项时，某些选项将起作用(例如 Option 5 和 Option 6)，而 Option 7 将不起作用(它不会进行 AJAX 调用)。我不知道是什么导致了这种行为。
我注意到，如果我从第二个列表中删除 AJAX 调用，并像这样添加 alert('changed'):
$('#ajaxcall').on('change', function(){
$("select[name='optiontwo']").on('change', function () {
alert('changed')
});
});
并多次更改optiontwo，然后它会调用几次alert。我也不知道这是否是正常行为。
问题: 如何让这个东西工作？
最佳答案
尝试为 optiontwo 选择使用 delegate 事件:-
<script type="text/javascript">
$(document).ready(function(){
$("select[name='optionone']").on('change',function(){
var option = $("select[name='optionone']").val();
jQuery.ajax({
type: "GET",
url: "data.php",
data: "option="+option,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
$('#ajaxcall').on('change', "select[name='optiontwo']", function () {
var optionone = $("select[name='optionone']").val();
var optiontwo = $("select[name='optiontwo']").val();
console.log(optionone +'|||'+ optiontwo)
$.ajax({
type: "GET",
url: "data.php",
data: "optionone="+optionone+"&optiontwo="+optiontwo,
success: function(response){
$("#ajaxcall").html(response);
$("#ajaxcall").show();
}
});
});
});
</script>
关于javascript - 动态添加的选择列表未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34609249/
当我使用Bundler时，是否需要在我的Gemfile中将其列为依赖项？毕竟，我的代码中有些地方需要它。例如，当我进行Bundler设置时:require"bundler/setup" 最佳答案 没有。您可以尝试，但首先您必须用鞋带将自己抬离地面。 关于ruby-我需要将Bundler本身添加到Gemfile中吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/4758609/
我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-
我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t
我有一个ModularSinatra应用程序，我正在尝试将Bootstrap添加到应用程序中。get'/bootstrap/application.css'doless:"bootstrap/bootstrap"end我在views/bootstrap中有所有less文件，包括bootstrap.less。我收到这个错误:Less::ParseErrorat/bootstrap/application.css'reset.less'wasn'tfound.Bootstrap.less的第一行是://CSSReset@import"reset.less";我尝试了所有不同的路径格式，但它
我正在使用Sequel构建一个愿望list系统。我有一个wishlists和itemstable和一个items_wishlists连接表(该名称是续集选择的名称)。items_wishlists表还有一个用于facebookid的额外列(因此我可以存储opengraph操作)，这是一个NOTNULL列。我还有Wishlist和Item具有续集many_to_many关联的模型已建立。Wishlist类也有:selectmany_to_many关联的选项设置为select:[:items.*,:items_wishlists__facebook_action_id].有没有一种方法可以
我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳
是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候，我们都会看到一个可能包含5个或更多ruby的列表，我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论
关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request
在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo
当谈到运行时自省(introspection)和动态代码生成时，我认为ruby没有任何竞争对手，可能除了一些lisp方言。前几天，我正在做一些代码练习来探索ruby的动态功能，我开始想知道如何向现有对象添加方法。以下是我能想到的3种方法:obj=Object.new#addamethoddirectlydefobj.new_method...end#addamethodindirectlywiththesingletonclassclass这只是冰山一角，因为我还没有探索instance_eval、module_eval和define_method的各种组合。是否有在线/离线资