2014-06-25 66 views
0

專家!我在兩個動態下拉菜單中遇到了一些問題。這裏是我的小提琴:Javascript動態下拉菜單顯示問題

Demo

,這裏是我的jQuery和Javascript:

var num_rows = 1; 
var num_tests = 1; 
var myArray = new Array(); 

function firstSelection(id) { 
    var index = id.replace(/\D+/g, ''); 
    var item = $("#select" + index + "").val(); 
    var object = item.replace(/\d/g, ""); 

    var table = $("#test"); 

    if(object == 'analize') { 
     table.find('tr').each(function(i) { 
      $("#selectTest" + i + "").empty(); 
      $("#selectTest" + i + "").append("<option value=''/><option value='analizetest1'>AnalizeTest1</option><option value='analizetest2'>AnalizeTest2</option><option value='analizetest3'>AnalizeTest3</option>"); 
     }); 
    } 
    else if(object == 'create') { 
     table.find('tr').each(function(i) { 
      $("#selectTest" + i + "").empty(); 
      $("#selectTest" + i + "").append("<option value=''/><option value='createtest1'>CreateTest1</option><option value='createtest2'>CreateTest2</option>"); 
     }); 
    } 
    else if(object == 'draft') { 
     table.find('tr').each(function(i) { 
      $("#selectTest" + i + "").empty(); 
      $("#selectTest" + i + "").append("<option value=''/><option value='drafttest1'>DraftTest1</option><option value='drafttest2'>DraftTest2</option><option value='drafttest3'>DraftTest3</option>"); 
     }); 
    } 
    else { 
     table.find('tr').each(function(i) { 
      $("#selectTest" + i + "").empty(); 
     }); 
    } 
} 

$(document).ready(function() { 
    $("#addObjekt").click(function() { 
     num_rows = $("#objectTable tr").length; 

     $("#objectTable").append("<tr id='objectRow" + num_rows + "'><td><input class='text' type='text' id='pbz" + num_rows + "' name='pbz" + num_rows + "' value='" + num_rows + "' readonly/></td><td><select id='select" + num_rows + "'><option/><option value='analize" + num_rows + "'>Analize</option><option value='create" + num_rows + "'>Create</option><option value='draft" + num_rows + "'>Draft</option></select></td><td><button type='button' id='selectButton" + num_rows + "' onclick='firstSelection(id);'>Select</button></td><td><button type='button' id='copy" + num_rows + "'>Copy</button></td></tr>"); 
    }); 

    $("#deleteObjekt").click(function() { 
     var row = $("#objectTable tr").length - 1; 

     if(row > 1) { 
      $("#objectRow" + row + "").remove(); 
      return false; 
     } 
     else { 
      // do nothing 
     } 
    }); 

    $("#addTest").click(function() { 
     num_tests = $("#test tr").length; 

     $("#test").append("<tr id='testRow" + num_tests + "'><td><input class='text' type='text' id='zaehler" + num_tests + "' name='zaehler" + num_tests + "' value='" + num_rows + "-" + num_tests + "' readonly/></td><td><select id='selectTest" + num_tests + "'></select></td><td><button type='button' id='parameter" + num_tests + "'>Parameter</button></td><td></td><td></td></tr>"); 
    }); 

    $("#deleteTest").click(function() { 
     var test_row = $("#test tr").length - 1; 

     if(test_row > 1) { 
      $("#testRow" + test_row + "").remove(); 
      return false; 
     } 
     else { 
      // do nothing 
     } 
    }); 
}); 

function showMatrix() { 
    num_rows = $("#objectTable tr").length - 1; 
    num_tests = $("#test tr").length; 

    for(var x = 0; x < num_rows; x++) { 
     myArray[x] = new Array(); 
     myArray[x] = $("#select" + (x + 1) + "").val(); 

     for(var z = 0; z < num_tests; z++) { 
      myArray[x][z] = firstSelection.item + firstSelection.index; 
     } 

    } 

    alert(myArray); 
} 

的問題是:

  1. 第二個下拉列表不會得到一個基於填充選擇第一個呢。由於某種原因,它在小提琴中無法正常工作,它在我使用的環境中運行良好。
  2. 如何更改代碼,以便我看到第二個下拉列表也填充爲以後添加的新行,而不僅僅是已經存在的行?
  3. 最後,我希望右側的行僅「附加」到它們在左側鏈接到的單個對象。這意味着選擇左側的對象應該只顯示其各自的測試。我不熟練使用Javascript,我開始創建一個二維數組,但陷入困境。

我知道這可能有點太多問,但我會深表感謝任何建議。謝謝!

+0

where is firstSelection defined ??? myArray [x] [z] = firstSelection.item + firstSelection.index; – Rex

+0

它應該是firstSelection函數中參數的外部引用。 – webbul

回答

0

確保功能firstSelection在範圍內。此舉函數內部

$(document).ready(function() 
{ 
    //... 
});; 

如果你的代碼是正確的,它將正常工作。

我認爲這是因爲我在運行你的代碼得到了以下錯誤:

Uncaught ReferenceError: firstSelection is not defined 

好的嘗試。這是工作。在此之前,編輯像下面的HTML和JS:

HTML:

<table id="panel" class="panel"> 
     <tr> 
      <td> 
       <table id="objectTable" class="objectTable"> 
        <tr id="initial"> 
         <td width="20px">Number</td> 
         <td>Object</td> 
         <td align="right"><button type="button" id="addObjekt" href="#">+</button><button type="button" id="deleteObjekt" href="#">-</button></td> 
         <td></td> 
        </tr> 
        <tr id="objectRow1"> 
         <td><input class="text" type="text" id="pbz1" name="pbz1" value="1" readonly/></td> 
         <td><select id="select1"> 
          <option/> 
          <option value="analize1">Analize</option> 
          <option value="create1">Create</option> 
          <option value="draft1">Draft</option> 
         </select></td> 
         <td><button type="button" id="selectButton1">Select</button></td> 
         <td><button type="button" id="copy1">Copy</button></td> 
        </tr> 
       </table> 
      </td> 
      <td> 
       <table id="test" class="test"> 
        <tr> 
         <td>Subnumber</td> 
         <td>Test <button type="button" id="addTest" href="#">+</button><button type="button" id="deleteTest" href="#">-</button></td> 
         <td></td> 
         <td></td> 
        </tr> 
        <tr id="testRow1"> 
         <td><input class="text" type="text" id="zaehler1" name="zaehler1" value="1-1" readonly/></td> 
         <td><select id="selectTest1"> 
         </select></td> 
         <td><button type="button" id="parameter1">Parameter</button></td> 
         <td></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 

JS:

var num_rows = 1; 
var num_tests = 1; 
var myArray = new Array(); 
var globalIndex = 0; 
var globalObject = ''; 

$(document).ready(function() {  

    $('#selectButton1').click(function(){ 
     firstSelection(this.id); 
    }); 

    function firstSelection(id) { 
    var index = id.replace(/\D+/g, ''); 
    var item = $("#select" + index + "").val(); 
    var object = item.replace(/\d/g, ""); 
    globalIndex = index; 
    globalObject = object; 
    var vars = {index: index, item: item}; 

    //var table = $("#test"); 

    document.getElementById("zaehler1").value = index + '-1'; 

    if(object == 'analize') { 
     $("#selectTest1").empty(); 
     $("#selectTest1").append("<option value=''/><option value='analizetest1'>AnalizeTest1</option><option value='analizetest2'>AnalizeTest2</option><option value='analizetest3'>AnalizeTest3</option>"); 
    } 
    else if(object == 'create') { 
     $("#selectTest1").empty(); 
     $("#selectTest1").append("<option value=''/><option value='createtest1'>CreateTest1</option><option value='createtest2'>CreateTest2</option>"); 
    } 
    else if(object == 'draft') { 
     $("#selectTest1").empty(); 
     $("#selectTest1").append("<option value=''/><option value='drafttest1'>DraftTest1</option><option value='drafttest2'>DraftTest2</option><option value='drafttest3'>DraftTest3</option>"); 
    } 
    else { 
     $("#selectTest1").empty(); 
    } 

    return vars; 
} 

    $("#addObjekt").click(function() { 
     num_rows = $("#objectTable tr").length; 

     $("#objectTable").append("<tr id='objectRow" + num_rows + "'><td><input class='text' type='text' id='pbz" + num_rows + "' name='pbz" + num_rows + "' value='" + num_rows + "' readonly/></td><td><select id='select" + num_rows + "'><option/><option value='analize" + num_rows + "'>Analize</option><option value='create" + num_rows + "'>Create</option><option value='draft" + num_rows + "'>Draft</option></select></td><td><button type='button' id='selectButton" + num_rows + "' onclick='firstSelection(id);'>Select</button></td><td><button type='button' id='copy" + num_rows + "'>Copy</button></td></tr>"); 
    }); 

    $("#deleteObjekt").click(function() { 
     var row = $("#objectTable tr").length - 1; 

     if(row > 1) { 
      $("#objectRow" + row + "").remove(); 
      return false; 
     } 
     else { 
      // do nothing 
     } 
    }); 

    $("#addTest").click(function() { 
     num_tests = $("#test tr").length; 

     $("#test").append("<tr id='testRow" + num_tests + "'><td><input class='text' type='text' id='zaehler" + num_tests + "' name='zaehler" + num_tests + "' value='" + globalIndex + "-" + num_tests + "' readonly/></td><td><select id='selectTest" + num_tests + "'></select></td><td><button type='button' id='parameter" + num_tests + "'>Parameter</button></td><td></td><td></td></tr>"); 

     $("#test").find('tr').each(function(i) { 
      if(globalObject == 'analize') { 
       $("#selectTest" + i + "").append("<option value=''/><option value='analizetest1'>AnalizeTest1</option><option value='analizetest2'>AnalizeTest2</option><option value='analizetest3'>AnalizeTest3</option>"); 
      } 
      else if(globalObject == 'create') { 
       $("#selectTest" + i + "").append("<option value=''/><option value='createtest1'>CreateTest1</option><option value='createtest2'>CreateTest2</option>"); 
      } 
      else if(globalObject == 'draft') { 
       $("#selectTest" + i + "").append("<option value=''/><option value='drafttest1'>DraftTest1</option><option value='drafttest2'>DraftTest2</option><option value='drafttest3'>DraftTest3</option>"); 
      } 
      else { 
       //nothing 
      } 
     }); 
    }); 

    $("#deleteTest").click(function() { 
     var test_row = $("#test tr").length - 1; 

     if(test_row > 1) { 
      $("#testRow" + test_row + "").remove(); 
      return false; 
     } 
     else { 
      // do nothing 
     } 
    }); 
}); 

function showMatrix() { 
    num_rows = $("#objectTable tr").length - 1; 
    num_tests = $("#test tr").length; 

    for(var x = 0; x < num_rows; x++) { 
     myArray[x] = new Array(); 
     myArray[x] = $("#select" + (x + 1) + "").val(); 

     for(var z = 0; z < num_tests; z++) { 
      myArray[x][z] = firstSelection.item + firstSelection.index; 
     } 

    } 

    alert(myArray); 
} 

Demo

+0

錯誤信息消失了嗎?因爲它對我來說沒有太大的改變。 – webbul

+0

移動$(document).ready(function()中的函數忽略第一行的選定下拉項 – webbul

+0

JSFiddle先前無法填充我的第二個下拉列表,但現在它可以。但是,2D數組仍然只顯示對象值,它不插入測試的(第二維)任何想法? – webbul

0

方法showMatrix不能訪問的局部變量方法firstSelection那樣。

要在功能showMatrix可見功能firstSelection一個變量,你有三種選擇:

  • 使其成爲一個全球性的,
  • 使它成爲一個對象的屬性,或
  • 將它作爲一個參數當從showMatrix呼叫firstSelection

第三個選項可能是最好的選擇,全局變量不建議使用,即使項目屬性非常優化,它可能不是最適合您的情況。

只要確保firstSelection從您所需的變量中返回並在showMatrix之內訪問它們。你也可以讓它返回一個包含你需要的變量值的對象。

function firstSelection(id) { 
    var index = id.replace(/\D+/g, ''); 
    var item = $("#select" + index + "").val(); 
    // ... some code 
    var vars = {index: index, item: item}; 
    return vars; 
+0

感謝您的建議!我正在工作在最後一個,我也認爲這是最好的解決方案。但是,我的數組仍然沒有做任何事情關於第二個下拉選擇... – webbul