根据第一个选择的选项显示第二个选择框？

-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

根据第一个选择的选项显示第二个选择框？

回答

相关问题