jQuery

Question

是否可以在克隆过程中更改 selectbox's 选项？

我正在克隆一个 div 及其内部 children。每次克隆时，他们每个人都有不同的 ID。原始的 div 包含一个 select 框，它从数据库中获取它的值。我的问题是，是否可以修改克隆的 select 框的值，使它们不包含以前的 selected 值？有关如何执行此操作的任何提示？

我需要的是新创建的 select 框不包含之前 select 离子的值。

示例如果在 select 框 1 中我选择 1（从 1-10 的范围），那么值 1 将不会出现在另一个 select 箱子

JS

<script>
document.getElementById('btn_new_service').onclick = duplicate;
var i =0;
function duplicate() {
    var original = document.getElementById('duplicator');
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicator" + ++i; // there can only be one element with
    var new_service_ID = 'c_service-'+i;
    var new_vat_ID = 'vat-'+i;
    var new_amount_ID = 'amount-'+i;
    var new_vatamount_ID = 'vat_amount-'+i;
    clone.querySelector('#c_service').setAttribute('id',new_service_ID);
    clone.querySelector('#vat').setAttribute('id',new_vat_ID);
    clone.querySelector('#amount').setAttribute('id',new_amount_ID);
    clone.querySelector('#vat_amount').setAttribute('id',new_vatamount_ID);
    original.parentNode.appendChild(clone); 
};
</script>

Answer 1

您应该跟踪 select 编辑的内容并从头开始重新生成 select，这样会更容易

const selectClass = "mySelect";
const options = [
  {id: "c_service", name: "c_service"},
  {id: "vat", name: "vat"},
  {id: "amount", name: "amount"},
  {id: "vat_amount", name: "vat_amount"}
];

var id = 0;

function addSelect() {
  // Get selects
  let selects = document.getElementsByClassName(selectClass);
  // Get all selected values
  let selectedOpts = [];
  for (let select of selects) {
    if (select.value != "") {
      selectedOpts.push(select.value);
    }
  }
  // Create the new select
  let select = document.createElement("select");
  select.setAttribute("class",selectClass);
  select.appendChild(document.createElement("option"));
  // Get available options
  var avOpts = options.filter(o => selectedOpts.indexOf(o.id) == -1);
  // Create the options
  for (var option of avOpts) {
    id++; 
    let o = document.createElement("option");
    o.setAttribute("id", option.id + id);
    o.innerHTML = option.name;
    select.appendChild(o);
  }
  // Add the select to DOM
  document.getElementById("divToInsertInto").appendChild(select);
}


// add the initial select
addSelect();
// Attach event
document.getElementById('btn_new_service').onclick = addSelect;

<button id="btn_new_service">clone</button>

<div id="divToInsertInto">
</div>

jQuery - 是否可以在克隆过程中更改选择框的选项？

jQuery - Is it possible to change selectbox's options during cloning?

html

javascript

clone