动态替换一个div
我想替换DIV动态替换一个div
<div class="models">
<select disabled="disable">
<option>Model Name</option>
</select>
</div>
我努力的目标div和加载选择框这样
jQuery('.models select').change(function() {
var model = jQuery('.models option:selected').text();
内的选择框里面选择框我没有收到关于变化的任何行动，虽然
尝试FOLL因为：
/* using delegate version of .on */
jQuery(document).on('change', '.brands', function() {
var brand = jQuery('.brands option:selected').text();
brand = cleanString(brand);
jQuery('.models').load('/pf-models #' + brand);
});
jQuery(document).on('change', '.models select', function() {
var model = jQuery('.models option:selected').text();
model = cleanString(model);
jQuery('#show-models').load('/pf-urls #' + model);
});
对于处理“动态”的元素，你想用delegate指定动作。这基本上保留了一个方法分配给符合描述的所有元素。
参见：
绑定到文档是一个可怕的想法...它应该被绑定到最近的静态父... –
@SerjSagan和为什么绑定到doc这样一个“可怕”的想法。此外，我不知道最接近的“静态”元素。是啊，“我”往往绑定到已知的静态，但我也设计了很多“小部件”，并知道“最接近的静态元素”几乎不可能，因此我也绑定到文档很多... 0问题...永远......在任何平台上......在任何浏览器上。那么，为什么它是“可怕的”？ – SpYk3HH
@SerjSagan @SerjSagan没有充分的证据证明你知道你在说什么，而不是经常使用这个答案的人，并且多年以来，你的回应显然是粗鲁无礼，并且令那些不知道已有差异的人产生恐惧。请支持您的声明或将其删除。 – SpYk3HH
简单的变化：绑定你的改变事件处理程序div容器（这应该是目前该执行时），并获取文本值由此：
jQuery('.models').on('change','select',function() {
var model = jQuery(':selected',this).text();
var modelValue = jQuery(':selected',this).val();
});
注意：你的f iddle和标记有它diabled，当然就需要先启用，是这样的：
jQuery('.models>select').prop('disabled',false);
编辑：用你的小提琴，我捣碎左右，注释掉你的负担 - 因为它没有在那里工作和cleanstring，不存在，并且这个工作原理：
jQuery('.brands').change(function() {
alert('here');
var brand = jQuery('.brands option:selected').text();
// brand = cleanString(brand);
//jQuery('.models').load('/pf-models #' + brand);
jQuery('.models>select').append('<option >She is a classic</option>').prop('disabled', false);
});
alert(jQuery('.models>select').prop('disabled'));
jQuery('.models').on('change', 'select', function() {
var model = jQuery(":selected", this).text();
alert(model);
model = cleanString(model);
jQuery('#show-models').load('/pf-urls #' + model);
});
更新拨弄：http://jsfiddle.net/HNgKt/6/
EDIT进一步的详细示例中，仍然是基于有效的标记假设从负载回来上我已经取代了第一部分一个html替换罪CE我们还没有接触到的部分：
jQuery('.brands').change(function() {
var brand = jQuery('.brands option:selected').text();
$('.models').html('<select class="models"><option >' + brand + ' She is a classic</option><option>clunker</option></select>');
});
jQuery('.models').on('change', 'select', function() {
var model = jQuery(":selected", this).text();
alert('model:' + model);
});
小提琴为：http://jsfiddle.net/HNgKt/7/
警报的模型，如果你选择一个品牌，然后一个模型。
有人显然不喜欢我认为'jQuery（' .models'）。load（'/ pf-models＃'+ brand）'实际上会返回select的有效HTML标记。所以，我又增加了一个例子。 –
尝试以下步骤，
- 对品牌变化列表中进行Ajax调用，并确保在结果您收到新的列表选项，也可以动态地在jQuery的准备选项列表也。
- 并且调用成功后，用收到的数据重新填充新列表。
jQuery('.brands').change(function() {
var brand = jQuery('.brands option:selected').text();
brand = JSON.stringify(cleanString(brand));
$.ajax({
type: "GET", //GET or POST or PUT or DELETE verb
url: ajaxUrl, // Location of the service
data: brand , //Data sent to server
contentType: "", // content type sent to server
dataType: "json", //Expected data format from server
processdata: true, //True or False
success: function (data) {//On Successful service call
var $newList = $(".models select'").empty();
$newList.append(data);
},
error: function(){} // When Service call fails
});
});
你可以elobrate更多... –
有一个选项是没有办法的选择，以“变” –
在一个侧面说明，你应该使用[ 'optgroup']（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup）s为“品牌”和“型号名称” –