我正在使用sumoselect插件(http://hemantnegi.github.io/jquery.sumoselect/sumoselect_demo.html)。
我有两个选择下拉菜单。首先,一个我直接添加到HTML页面,第二个我使用jQuery动态显示。
sumoselect插件仅适用于第一个选择下拉列表,而不适用于第二个选择下拉列表。
您能帮我解决这个问题吗?
$(document).ready(function() {
$('.fileStatus').SumoSelect();
var wrapper = $(".appentInside .row"); //Fields wrapper
var add_button = $(".click_me"); //Add button ID
$(add_button).click(function(e) { //on add input button click
$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>');
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">
<select name="pp_fileStatus[]" class="fileStatus">
<option disabled="" selected="">Select</option>
<option value="1"> One</option>
<option value="2"> Two</option>
<option value="3"> Three</option>
</select>
<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
<div class="row"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>
使用@Terry答案后
$(document).ready(function() {
$('.fileStatus').SumoSelect();
$('.fileStatus:first').change(function() {
var fileStatus = $('.fileStatus option:selected').val();
$('.fileStatus:last').val(fileStatus);
})
var wrapper = $(".appentInside .row"); //Fields wrapper
var add_button = $(".click_me"); //Add button ID
$(add_button).click(function(e) { //on add input button click
e.preventDefault();
var fileStatus = $('.fileStatus:last option:selected').val();
$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>').find('.fileStatus').SumoSelect();
$('.fileStatus:last').val(fileStatus);
});
});
答案 0 :(得分:0)
这是因为您的新.fileStatus
下拉列表是在运行时之后添加的,并且代码$('.fileStatus').SumoSelect()
已被调用。重要的是要记住,JS不会一直处于自动反应状态,因为它将一直自动查找新元素:您将需要在添加的新<select>
元素上实例化SumoSelect。
您可以简单地通过在.find('.fileStatus').SumoSelect()
方法之后链接.append()
来做到这一点,因为届时新的.fileStatus
元素将已经存在于DOM中:
$(document).ready(function() {
$('.fileStatus').SumoSelect();
var wrapper = $(".appentInside .row"); //Fields wrapper
var add_button = $(".click_me"); //Add button ID
$(add_button).click(function(e) { //on add input button click
$(wrapper).append('<select name="pp_fileStatus[]" class="fileStatus"><option disabled="" selected="">Select</option><option value="1"> One</option><option value="2">Two</option><option value="3"> Three</option></select>').find('.fileStatus').SumoSelect();
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">
<select name="pp_fileStatus[]" class="fileStatus">
<option disabled="" selected="">Select</option>
<option value="1"> One</option>
<option value="2"> Two</option>
<option value="3"> Three</option>
</select>
<a href="javascript:void(0);" class="click_me">click me to display seocnd dropdown</a>
<div class="appentInside">
<div class="row"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>