问题描述
好的，我想这是一个优先问题，但是我不知道如何解决。
这是我的问题。
我有两个功能（jQuery）围绕选择标签。 第一个允许获取所选选项的值并将其放入跨度（在select标签旁边）。 用于显示用户选择的值。
我会告诉你它不太长：
我正在处理的选择 ：
<div class="col-xs-4">
<label>Kitten(s)</label>
<div class="selector">
<select>
<option value="1" >01</option>
<option value="2">02</option>
...
</select><span class="custom-select"></span>
</div>
</div>
jQuery的：
jQuery(document).ready(afficheSelect);
function afficheSelect(){
$('select').on('keyup change', function(){
$(this).next('span').empty(); /* Empty the span when a change occur */
$(this).next('span').append($(this).val()); /* Show the number selected */
});
}
我的第二个函数， 在选择的第一个值的函数中显示一些选择 。
假设您选择了3只小猫，它将做3 选择您可以指定它们颜色的位置（例如）。
第二功能：（您不必阅读它即可回答我的问题:)）
jQuery(document).ready(affKitt);
function affKitt(){
$('select').on('keyup change', function(){
$('#test').empty();
nbK = $(this).val();
if(nbK > 0){
html = "<label id='bug7'>Indicate the color of the kitten :</label>";
for(var i=1; i <= nbK; i++) /* Show number of select */
{
else
{
html +='<div class="col-xs-4"><div class="selector"><select id="colorKitten'+i+'" name="colorKitten'+i+'">';
for(var k=2; k <= 11; k++) /* Show option (allways the same) */
{
html +="<option value='colorSelected'>Blue, Grey ....</option>";
}
/* Closing tags */
html +="</select><span class='custom-select'></span></div></div>";
}
}
$('#colorKittens').append(html); /* This is a div under a certaine place */
}
});
}
现在这是我的问题 ：第一个函数不适用于我的第二个函数生成的选择...为什么？
谢谢任何可以回答这个问题的人！
1楼
您需要先将change event的event handler应用于variable html然后再将其附加到元素$('#colorKittens').append(html);
。
解
// Make the variable for HTML a jQuery object, so you can apply jQuery.fn to it
var jHtml = $(html);
// Check that jHtml is not EMPTY
if(jHtml.length) {
jHtml.afficheSelect();
$('#colorKittens').append(jHtml);
}
的HTML
<select class='my_select_box'>
<option value='blue'>Blue Kitten</option>
<option value='red'>Red Kitten</option>
<option value='red'>Yellow Kitten</option>
</select>
<span class='mynextelement'></span>
afficheSelect
jQuery.fn.afficheSelect = function() {
var next_span_element = $(this).next('span');
$(this).change(function() {
var selected_option_value = $(this).find('option:selected').val();
next_span_element.html(selected_option_value); /* Show the number selected */
});
};
我找到了span元素，找不到；
而在.change function内。
。
2楼
代替这个：
jQuery(document).ready(afficheSelect);
function afficheSelect(){
$('select').on('keyup change', function(){
$(this).next('span').empty(); /* Empty the span when a change occur */
$(this).next('span').append($(this).val()); /* Show the number selected */
});
}
尝试这个：
jQuery(document).ready(afficheSelect);
function afficheSelect(){
$('select').on('keyup change', function(){
$(this).next('span').html($(this).val()); /* Show the number selected */
});
}
3楼
好的，我已经处理好了。
就像将函数调用到创建函数中一样容易：请参见此处的小提琴：
一个简单的afficheSelect();