Question

我有一个html格式的下拉列表。如果用户在此选择任何选项，则根据我想要显示另一个下拉列表的选项。

   <select name="places">
    <option value="-1">Select</option>
      <option value="nilgiris">Nilgiris </option>
      <option value="coimbatore">Coimbatore</option>
      <option value="chennai">Chennai</option>
    </select>

例如，如果用户选择'Nilgiris'，我想在Nilgirs中展示地点，如ooty，coonoor，kotagiri ...

  <option value="ooty">Ooty </option>
  <option value="coonoor">Coonoor</option>
  <option value="kotagiri">Kotagiri</option>

怎么做......

function check(elem) {
    document.getElementById('places1').disabled = !elem.selectedIndex;
    }

<select name="places" onchange="check(this);">
        <option value="-1">Select</option>
          <option value="nilgiris">Nilgiris </option>
          <option value="coimbatore">Coimbatore</option>
          <option value="chennai">Chennai</option>
        </select>


<select id="places1" disabled="disabled" >
<option>Ooty</option>
<option>Coonoor</option>
<option>Kotagiri</option>
</select>

此代码在'places'下拉列表中的任何选项中启用'places1'下拉列表...

我想让它只能在'places'下拉列表中选择Nilgiris。

如何制作???

Answer 1

对于select标签，有'onselect'事件。 'onselect'在元素中选择了一些文本后触发。你可以调用函数onselect事件。

您将选择的值转换为函数取决于您可以在下拉列表中绑定的值。

Answer 2

<select name="places" id="dropdownlist" onchange="formulaTypeChange()">
  <option value="-1">Select</option>
  <option value="nilgiris">Nilgiris</option>
  <option value="coimbatore">Coimbatore</option>
  <option value="chennai">Chennai</option>
</select>
<select id="nilgiris" style="display:none">
  <option value="ooty">Ooty</option>
  <option value="coonoor">Coonoor</option>
  <option value="kotagiri">Kotagiri</option>
</select>
<select id="coimbatore" style="display:none">
  <option value="mtp">MTP</option>
  <option value="pollachi">Pollachi</option>
  <option value="CBE">CBE</option>
</select>
<select id="chennai" style="display:none">
  <option value="perambur">Perambur</option>
  <option value="guduvancheri">Guduvancheri</option>
  <option value="mahabalipuram">Mahabalipuram</option>
</select>

带有相应选项的四个下拉列表。

function formulaTypeChange() {
     if($("#dropdownlist").find('option:selected').val()== "nilgiris"){
         $('#nilgiris').css('display', 'block');
         $('#coimbatore').css('display', 'none');
         $('#chennai').css('display', 'none');
     } else if (str == 'coimbatore') {
         $('#nilgiris').css('display', 'none');
         $('#coimbatore').css('display', 'block');
         $('#chennai').css('display', 'none');
     } else if (str == 'chennai') {
         $('#nilgiris').css('display', 'none');
         $('#coimbatore').css('display', 'none');
         $('#chennai').css('display', 'block');
     }
 }

根据#dropdownlist中的值，会显示随后出现的下拉列表。希望这有帮助。

如何显示所选值的下拉列表？

2 个答案: