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

【问题标题】：Show a second select box based on the option chosen in the first?根据第一个选择的选项显示第二个选择框？
【发布时间】：2014-09-04 11:12:51
【问题描述】：

我有以下选择下拉框：

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

我想要做的是，如果选择了 Interlink，则会在其下方出现一个辅助选择框，如果未选择它并选择另一个选项，则它会消失。这是第二个选择下拉框。

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

我怎样才能让它工作？

【问题讨论】：

如果未选中意味着什么？

标签： javascript html drop-down-menu onchange

【解决方案1】：

在更改时使用 javascript 绑定一个事件，并在 DOM 中插入一个新元素（第二个 select 语句），例如：

（前提是你有 jquery）

    var secondSelect="your_html_here";

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

自定义 html 以及您要附加第二个选择的位置

【讨论】：

在我回答后的几毫秒内，投票自动发生了。谢谢！

【解决方案2】：

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

});
function call()
{

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

否则 { $('#s1').hide(); }

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

你可以使用上面的代码来完成你的任务

【讨论】：

【解决方案3】：

只需对更改第一个选择的值的事件做出反应。

如果值等于 'Interlink'，则显示第二个选择 - 如果该值是其他值，则隐藏第二个选择。

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

【讨论】：

【解决方案4】：

您可以为此使用 ajax。编写一个 ajax 函数来显示第二个选择框并在第一个选择框的 onChange 事件上调用它

【讨论】：