Question

我需要创建一个区域菜单，并显示两个列表：该区域为<select>，该区域可用城市为<select>。为此，我有一个<form>，我通过JavaScript更新了市政当局。我在将市政当局分配为<option>的{{1}}时遇到问题。菜单的选项矩阵不接受值的赋值。

这是代码。

HTML

<select>

Javascript代码：

<html>  
  <head>
    <title>
      P&aacute;gina men&uacute; principal.
    </title>
    <?!= incluirArchivo('ArchivoJS'); ?>
  </head>
  <body onLoad = "preparar();"> 
    <form id="formularioConductor" name="formularioConductor" method="post" enctype="multipart/form-data" autocomplete = "on">

    <select name="menuDepartamento" id="menuDepartamento" tabindex="2" accesskey="e" onChange="municipiosDepartamento();">
     <option value="x" selected="selected">ELIJA UN DEPARTAMENTO</option>
     <option value="0">Antioquia</option>
     <option value="1">Atl&aacute;ntico</option>
    </select>
    <select name="menuMunicipios" id="menuMunicipios" tabindex="3" disabled>
                <option value=0>TODOS LOS MUNICIPIOS</option>
    </select>       
   </form>   
  </body> 
</html>

我强调了无效的工作。

Answer 1

我按照你所描述的方式做的就是每次清除选项并重新创建所需的选项，然后将它们添加到特定的选择中，如下所示：

var regions = {};
regions['A'] = ['mu', 'ni', 'ci', 'pal', 'it', 'y'];
regions['B'] = ['I', 'like', 'bananas'];

var selRegion = document.getElementById('region');

selRegion.onchange = setMunicipalities;

var selMun = document.getElementById('municipality');

function setMunicipalities(e)
{
  while(selMun.length > 0)
  {
    selMun.remove(0);
  }    
  if(selRegion.selectedOptions[0].value === 'ALL')
  {
    for(var r in regions)
    {
      if(regions.hasOwnProperty(r))
      {
        addMunicipalities(regions[r]);
      }
    }    
  }
  else
  {
    var reg = selRegion.selectedOptions[0].value;
    addMunicipalities(regions[reg]);
  }
}

function addMunicipalities(region)
{
  var allMun = document.createElement('option');
  allMun.setAttribute('value', 'ALL');
  var allMunText = document.createTextNode('ALL');
  allMun.appendChild(allMunText);
  selMun.add(allMun);
  for (var mi = 0; mi < region.length; mi++)
  {
    var m = region[mi];
    var mun = document.createElement('option');
    mun.setAttribute('value', m);
    var munText = document.createTextNode(m);
    mun.appendChild(munText);
    selMun.add(mun);
  }  
}

setMunicipalities(null);

<label for="region">Region</label>
<select id="region">
  <option selected="selected" value="ALL">ALL</option>
  <option value="A">A</option>
  <option value="B">B</option>
</select>

<label for="municipality">Municipality</label>
<select id="municipality">
</select>

Answer 2

我还没有阅读你的整个代码，因为我很难阅读内容不是英文的代码，但无论如何，我得到了你想要做的事情。假设您的第一个选择列表包含“区域A”和“区域B”作为选项; “市政A1”，“市政A2”，“市政B1”，“市政B2”是第二选择清单的可能选项。这是一个函数，它将根据第一个选择列表中选择的内容更改第二个选择列表的选项：

    function optionChanger(v_selected){
          var whatisselected= v_selected.options[v_selected.selectedIndex].value;
          var municipalities= {};
          municipalities['A'] = ['Municipality A1','Municipality A2'];
          municipalities['B'] = ['Municipality B1','Municipality B2'];
          v_selected.options.length=0; //remove the contents of the second select list
          v_selected.options[0] = new Option(municipalities[whatisselected][0],municipalities[whatisselected][0],false,true);// set the first option of the second list as the default selected value
          for(x=1;x<municipalities[whatisselected].length;x++){ //add the remaining options to the second list
               v_selected.options[x] = new Option(municipalities[whatisselected][x],municipalities[whatisselected][x],false,false);
          }
  }

然后在FIRST选择列表的标签内添加：
onchange='optionChanger(this)' PS：请注意，第一个选择列表的返回值必须为“A”，“B”

如何创建一个取决于另一个选择值的选择？

2 个答案: