2013-10-08 85 views
-1

我有一個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> 

例如,如果用戶選擇 '尼爾吉里斯' 我要像展示烏蒂,古努爾,科塔吉里在Nilgirs地方...

<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> 

此代碼啓用'places1'下拉列表中的'places'下拉列表中的任何選擇...

我想使它enabl e僅用於在'地點'下拉列表中選擇Nilgiris。

如何讓它?

+0

可能的重複:http://stackoverflow.com/questions/18884713/dynamic-drop-down-list-using-html-and-php – SBerg413

+0

您可以使用AJAX獲取多選下拉列表 –

回答

0

對於選擇標籤有'onselect'事件。 'onselect'在元素中選擇了一些文本後觸發。您可以在選擇事件時調用函數。

您將獲得選定的值進入函數取決於您可以綁定第二個下拉的值。

0
<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中的值,會出現隨後的下拉列表。希望這有助於。

相關問題