将下拉选项替换为仅与数组中的值匹配的选项

时间:2015-02-09 15:21:49

标签: javascript jquery

您好我正在努力在原始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;
        }
    }
  }

我需要做的是更改此代码,以便不会根据带有下划线的键名选择子下拉列值,但是当它们是传入的数组的一部分时被选中。该数组称为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并确定vales是否在该数组中等。

1 个答案:

答案 0 :(得分: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;
}

}