根據第一個選擇的選項顯示第二個選擇框？

-1

 <select name="selectcourier" required> 
     <option value="">Please Select</option> 
     <option value="collection">Collection</option> 
     <option value="Interlink">Interlink</option> 
     <option value="DespatchBay">Despatch Bay</option> 
     <option value="International">International</option> 
     </select>

如果互聯選擇下方會顯示一個二次選擇框，我想要做的是，如果它選擇，而另一選項是選擇，而不是消失。這是第二個選擇下拉框。

 <label>Select Shipping Courier:</label> 
    <select name="selectcourier" required> 
     <option value="1">Please Select</option> 
     <option value="2">Next Day</option> 
     <option value="3">2-3 Day</option> 
     <option value="3">Pre 12</option> 
    </select>

我該如何去做這個工作？

來源

2014-09-04 Mikey Barker

如果未選中是指？ – 2014-09-04 11:14:41

綁定與更改JavaScript事件並插入一個新的DOM像元（第二個SELECT語句）：

（前提是你有jQuery的）

var secondSelect="your_html_here"; 

    $("name='selectcourier'").change(function() { 
     if (this.val()=='Interlink') { 
      $('body').append(secondSelect); } 
     else { 
      $('#secondselectid').remove(); 
     });

自定義HTML以及在哪裏想追加第二個選擇

來源

2014-09-04 11:20:31 arisalexis

downvote在我回答後自動發生了毫秒。謝謝！ – arisalexis 2014-09-04 11:21:26

你可以使用ajax來做到這一點。寫一個AJAX函數來顯示第二個選擇框，並調用它的第一個選擇框中

來源

2014-09-04 11:27:42 ateenraw

<script> 
$(function(){ 
    $('#s1').hide(); 

}); 
function call() 
{ 

     var check=$('#s2').val(); 
    if(check=="Interlink") 
     { 
     $('#s1').show(); 
     }

其他 { $（「＃S1」）的onChange事件隱藏（）。 }

} 
</script> 


<select name="selectcourier" required onchange="call();" id="s2" > 
     <option value="">Please Select</option> 
     <option value="collection">Collection</option> 
     <option value="Interlink">Interlink</option> 
     <option value="DespatchBay">Despatch Bay</option> 
     <option value="International">International</option> 
     </select> 
     <label>Select Shipping Courier:</label> 
    <select name="selectcourier" required id="s1"> 
     <option value="1">Please Select</option> 
     <option value="2">Next Day</option> 
     <option value="3">2-3 Day</option> 
     <option value="3">Pre 12</option> 
    </select>

您可以用上面的代碼來實現你的任務

來源

2014-09-04 11:31:40 KVK

上改變第一選擇的值的情況下，剛反應過來。

如果值爲「互聯」顯示第二個選擇 - 如果該值是別的東西隱藏第二選擇。

<select name="selectcourier" required onchange="document.getElementById('interlink_addition').style.display = (this.value=='Interlink' ? 'block' : 'none')"> 
    <option value="">Please Select</option> 
    <option value="collection">Collection</option> 
    <option value="Interlink">Interlink</option> 
    <option value="DespatchBay">Despatch Bay</option> 
    <option value="International">International</option> 
</select> 
<div id="interlink_addition" style="display:none"> 
    <label>Select Shipping Courier:</label> 
    <select name="selectcourier" required> 
    <option value="1">Please Select</option> 
    <option value="2">Next Day</option> 
    <option value="3">2-3 Day</option> 
    <option value="3">Pre 12</option> 
    </select> 
</div>

來源

2014-09-04 11:43:09 Phil

根據第一個選擇的選項顯示第二個選擇框？

回答

相關問題