當下拉菜單設置為“否”時如何顯示 div？

Question

我正在處理一個默認隱藏地址字段的表單。 如果有人之前沒有訂購過，他們會將下拉菜單從 Yes 更改為 No，並且地址字段應該會顯示出來。

下拉代碼如下：

<label for="have_ordered_before"><span>*Have you ordered from us before?</span>
<select name="have_ordered_before" id="have_ordered_before">
        <option value="Yes">Yes</option>
        <option value="No">No</option>
</select>
</label>

地址 div 如下：

<div id="address-info" style="display:none">
 form details go here...
</div>

我嘗試使用的腳本是：

<script type="text/javascript">
    function check_dd() {
    if(document.getElementById('have_ordered_before').value == "Yes") {
        document.getElementById('address-info').style.display = 'none';
    } else {
        document.getElementById('address-info').style.display = 'block';
    }
}
</script>

我對這里的解決方案持開放態度，並希望得到任何幫助。 謝謝。

Answer 1

您需要將事件更改（在本例中為change ，click/keypress 是其他示例）綁定到要檢查的函數：

document.getElementById('have_ordered_before').onchange = check_dd;

我給你做了一個小例子

---

如果你想要 jQuery*：

$('#have_ordered_before').on('change',check_dd);

或者，如果您想要整個 jQuery*：

$('#have_ordered_before').on('change',function(){
    $('#address-info').css({display: $(this).val()=='Yes' ? 'none' : 'block' }); 
});

再一次，這個例子

*兩者都需要准備好文件

Answer 2

這就是你可以在 jQuery 中做的事情

$(function(){
$('#have_ordered_before').change(function(){
    var val = $(this).val();
    if(val == 'Yes')
       $('#address-info').hide();
    else 
      $('#address-info').show();
});
});

Answer 3

通過 jQuery：使用 .change()

 $('#selectId').change(function(){
     if($('#selectId option:selected').val() == "No"){
         $('#divId').show();
     } else {
         $('#divId').hide();              
     };
 })

Answer 4

你錯過了對函數的調用：onchange="check_dd()"