Question

我有以下选择下拉框：

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

我怎样才能让这个工作？

Answer 1

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

（如果你有jquery）

    var secondSelect="your_html_here";

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

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

Answer 2

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

});
function call()
{

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

否则 { $（ '＃S1'）隐藏（）。 }

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

您可以使用上述代码来完成任务

Answer 3

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

Answer 4

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

如果值等于＆＃39; Interlink＆＃39; 显示第二个选择 - 如果该值是其他内容则隐藏第二个选择。

<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 个答案: