Question

我写了一些代码从Json文件中获取及其选项。直到我到达树的“叶子”为止。到目前为止一切都很好。无论如何，如果我更改前一个选择的选项，则会在最新选择的后面附加一个选择。相反，我需要根据上一个所做的更改来更改最新选项的值。例 1-> 1.1-> 1.1.1如果我将“ 1.1”变成“ 1.2” 我得到：1-> 1.2-> 1.1.1-> 1.2.1。我想要得到的是：1-> 1.2-> 1.2.1

Answer 1

好的，我终于有了解决方案。希望这能满足您的期望。我不得不稍微调整一下对象。但是最重要的变化是optionId的长度。请注意，每个级别的ID长一位数。因此，您可以弄清楚发生了什么更改。然后，删除以下所有级别，然后使用相应的值重新构建它们。而已。

 function createSelect(source) {
  var select = $('<select>');
  // add an additional field in order to be able to choose all real options from start
  var headline = $('<option>').attr('value', 0).html('-- choose --');
  select.append(headline);

  // for-loop  

  // the id of the last option field of each select field 
  // becomes the id of the select field
  select.attr('id', object.id);

  select.change(function() {
      // Get the ID of the current select
      // define max length by evaluating the length of the current select element's id
      const maxIdLength = this.id.length;

      // remove every element from DOM that has a larger id length
      $( "select" ).each( function(index, element) {
          let idLength = element.id.length;

          if(idLength > maxIdLength) {
              document.getElementById(this.id).remove();
          }         
      });

 // the rest of your code ...

Answer 2

是的，我还有第二个解决方案。使用Date（）。getTime（）的UTC毫秒作为ID。每个新的<select>的ID始终比您要单击的ID大。应该以相同的方式工作，而不必强制调整optionIds。我将所有ID改回了5位数字的长度。

function createSelect(source) {
  var select = $('<select>');
  // add an additional field in order to be able to choose all real options from start
  var headline = $('<option>').attr('value', 0).html('-- choose --');
  select.append(headline);

  // for-loop

  // the current UTC-millisecs become the ID
  select.attr('id', new Date().getTime());

        select.change(function() {
        // Get the ID of the current select
        const currentID = Number(this.id);

           // remove every element from DOM that has a larger id
           $( "select" ).each( function(index, element) {
              let otherID = Number(element.id);

              if(otherID > currentID) {
                  document.getElementById(this.id).remove();
              }         
           });

  // the rest of your code ...

当我更改选项时，将<select>与json中的数据连接

2 个答案: