2015-02-09 47 views
0

您好我正在努力在原始JavaScript中执行此操作。目前我有两个下拉列表一个父母和孩子,像这样:将下拉选项替换为仅与数组中的值匹配的选项

<select id="state" title="" name="state"> 
    <option selected="selected" value="Open" label="Open">Open</option> 
    <option value="Closed" label="Closed">Closed</option> 
</select> 



<select id="status" title="" name="status"> 
     <option value="Open_New" label="New">New</option> 
     <option value="Open_Assigned" label="Assigned">Assigned</option> 
     <option value="Closed_Closed" label="Closed">Closed</option> 
     <option value="Open_Pending Input" label="Pending External Input">Pending External Input</option> 
     <option value="Open_Pending" label="Pending Internal Input">Pending Internal Input</option> 
     <option value="Closed_Duplicate" label="Duplicate">Duplicate</option> 
     <option value="Open_CARD" label="CARD">CARD</option> 
     <option value="Open_Open" label="Open">Open</option> 
     <option value="Open_DAD" label="DAD">DAD</option> 
     <option value="Closed_Rejected" label="Rejected">Rejected</option> 
    </select> 

那孩子下拉值被选择基于父下拉值名称与和下划线:

function updateDynamicEnum(field, subfield){ 
     if(document.getElementById(subfield) != null){ 
      var selector = document.getElementById(subfield); 
    var de_key = document.getElementById(field).value; 

    var current = []; 
    for (var i = 0; i < selector.length; i++) { 
     if (selector.options[i].selected) current.push(selector.options[i].value); 
    } 


    if(de_entries[subfield] == null){ 
     de_entries[subfield] = new Array; 
     for (var i=0; i<selector.options.length; i++){ 
      de_entries[subfield][selector.options[i].value] = selector.options[i].text; 
     } 
    } 

    document.getElementById(subfield).innerHTML = ''; 

    for (var key in de_entries[subfield]) { 
     if(key.indexOf(de_key+'_') == 0){ 
      selector.options[selector.options.length] = new Option(de_entries[subfield][key], key); 
     } 
    } 

    for (var key in current) { 
     for (var i = 0; i < selector.length; i++) { 
      if(selector.options[i].value == current[key]) 
      selector[i].selected = true; 
     } 
    } 
    } 

我需要do是更改此代码,以便子键下拉值不是基于键名使用下划线选择的,而是当它们是传入的数组的一部分时选择的。该数组称为child_strings并且看起来像这样:

'open' => array(
    'Open_New', 
    'Open_Assigned', 
    'Open_Pending Input', 
    'Open_Pending', 
    'Open_CARD', 
    'Open_Open', 
    'Open_DAD' 
), 
'closed' => array(
    'Open_Assigned', 
    'Closed_Closed', 
    'Closed_Duplicate', 
    'Closed_Rejected', 
), 

我的新代码如下所示:

function updateDynamicEnum(field, subfield, child_strings){ 

//console.log(child_strings); 

if(document.getElementById(subfield) != null){ 

    var de_key = document.getElementById(field).value; 
    var child = document.getElementById(subfield); 

    var current = []; 
    for (var i = 0; i < child.length; i++) { 
     if (child.options[i].selected) current.push(child.options[i].value); 
    } 

    if(de_entries[subfield] == null){ 
     de_entries[subfield] = new Array; 
     for (var i=0; i<child.options.length; i++){ 
      de_entries[subfield][child.options[i].value] = child.options[i].text; 
     } 
    } 

    document.getElementById(subfield).innerHTML = ''; 

    //this part needs changes 
    for (var key in de_entries[subfield]) { 
     if(key.indexOf(de_key+'_') == 0){ 
      child.options[child.options.length] = new Option(de_entries[subfield][key], key); 
     } 
    } 

但挣扎,看看如何检查child_strings并确定瓦莱斯是阵列等进来。

+1

为什么jQuery是一个关键字,如果你不使用它? – Alex 2015-02-09 15:23:15

+0

我打开Jquery解决方案,如果它更简单 – user794846 2015-02-09 15:26:39

+0

您的整个代码将是:)没关系 – Alex 2015-02-09 15:27:12

回答

0

我想通了答案出来为自己,但如果有人可以发布更好的,请继续。

 function updateDynamicEnum(field, subfield, child_strings){ 

if(document.getElementById(subfield) != null){ 

    var de_key = document.getElementById(field).value; 
    var child = document.getElementById(subfield); 

    var current = []; 
    for (var i = 0; i < child.length; i++) { 
     if (child.options[i].selected) current.push(child.options[i].value); 
    } 

    if(de_entries[subfield] == null){ 
     de_entries[subfield] = new Array; 
     for (var i=0; i<child.options.length; i++){ 
      de_entries[subfield][child.options[i].value] = child.options[i].text; 
     } 
    } 

    document.getElementById(subfield).innerHTML = ''; 

    var arg = child_strings[de_key]; 

    for (var key in de_entries[subfield]) { 

     if(isInArray(key,arg)){ 

      child.options[child.options.length] = new Option(de_entries[subfield][key], key); 
     } 
    } 

     for (var key in current) { 
     for (var i = 0; i < child.length; i++) { 
      if(child.options[i].value == current[key]) 
       child[i].selected = true; 
     } 
    } 
} 
/*Checks if value is in an array*/ 
function isInArray(value, array) { 
    return array.indexOf(value) > -1; 
} 

}