Sumoselect 插件不适用于动态选择下拉菜单

Posted

技术标签:

【中文标题】Sumoselect 插件不适用于动态选择下拉菜单【英文标题】:Sumoselect plugin not working with dynamically select dropdown 【发布时间】:2019-11-11 00:33:33 【问题描述】:

我正在使用 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);
  );

);

【问题讨论】:

【参考方案1】:

那是因为您的新.fileStatus 下拉列表是在运行后添加的,并且代码$('.fileStatus').SumoSelect() 已经被调用。重要的是要记住 JS 不是响应式的,因为它会一直自动查找新元素:您需要在添加的新 &lt;select&gt; 元素上实例化 SumoSelect。

您可以简单地通过在.append() 方法之后链接.find('.fileStatus').SumoSelect() 来做到这一点,因为到那时新的.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>

【讨论】:

给我一些时间来理解你的答案。 是的,它非常适合我。我只想知道如何使用 .find('.fileStatus').SumoSelect();带有单独的变量。我的意思是我不想与 append 一起使用。我可以使用像 var x=find('.fileStatus').SumoSelect(); 我在问题中添加了脚本,使用您的答案后,我的脚本无法正常工作。如果我从下拉列表中选择任何内容并单击链接,那么它将显示带有自动选择字段的选择下拉列表。如果您更改选项值,那么它将更改选择值。供您参考***.com/questions/56768333/…

以上是关于Sumoselect 插件不适用于动态选择下拉菜单的主要内容,如果未能解决你的问题,请参考以下文章

SumoSelect 的全选选项与选择下拉菜单中的其他选项重叠

SumoSelect 处理事件不适用于 Android 设备

欧芹验证不适用于选择下拉菜单

下拉菜单不适用于移动浏览器

有没有办法在 jquery 中克隆 sumoselect 下拉菜单

如何在相扑选择下拉列表中显示 ajax 响应?