隐藏/显示下面的分区根据是否选择某个选项进行选择

Hide/Show Div below select depending on whether an option is selected or not

本文关键字：选择 是否 选项 行选 显示 分区 隐藏      更新时间：2023-09-26

基本上我有一个选择：

<select id="SelectExample">
    <option value="no_selection">&nbsp;</option>
    <option value="accessoires">Accessoires pour poubelles</option>
    <option value="chaises">Chaises</option>
    <option value="collecte">Collecte de déchets</option>
    <option value="poubelles">Poubelles</option>
</select>

下面是一个div，如果值是no_selection ，我想隐藏它

<div id="OtherDiv">
    <p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
    <p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
    <p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
    <p><a href="#" class="no_label" id="sdd">Modifier les attributs…</a></p>
</div>

我已经尝试过以前的JQuery和CSS示例，但似乎都不适合我，有人能给我一个很好的例子，告诉我该怎么做吗，因为我有点困了，谢谢。

开始吧。

您需要将更改事件绑定到您的选择框，并在更改时使用：selected来检索所选选项的值，并根据情况显示或隐藏。jQuery切换方法非常适合这一点。

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
    </head>
    <body>
        <select id="SelectExample">
            <option value="no_selection">&nbsp;</option>
            <option value="accessoires">Accessoires pour poubelles</option>
            <option value="chaises">Chaises</option>
            <option value="collecte">Collecte de déchets</option>
            <option value="poubelles">Poubelles</option>
        </select>
         <div id="OtherDiv">
            <p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
            <p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
            <p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
            <p><a href="#" class="no_label" id="sdd">Modifier les attributs…</a></p>
        </div>
        <script>
            var showHideDiv = function (evt) {
                var selectedValue = jQuery(evt.target).val();
                var isSelected = selectedValue !== 'no_selection';
                jQuery("#OtherDiv").toggle(isSelected);
            }
            jQuery('#SelectExample').change(showHideDiv).trigger("change");
        </script>
    </body>
</html>

<select id="SelectExample" onChange="$('#OtherDiv').toggle($(this).val() != 'no_selection');">

听起来以下内容对您有用吗？

$("#SelectExample").change(
 function()
 {
  var that = $(this);
  if(that.val() == "no_selection"){
   $("#OtherDiv").show();
  }else{
   $("#OtherDiv").hide();
  }
 }
);

只是一个简单的OnChange事件，然后检查字段的值——也就是说，你甚至不需要JQ。。

更改显示：

<select id="SelectExample" onchange="showOther(this.value)">
    <option value="no_selection">&nbsp;</option>
    <option value="accessoires">Accessoires pour poubelles</option>
    <option value="chaises">Chaises</option>
    <option value="collecte">Collecte de déchets</option>
    <option value="poubelles">Poubelles</option>
</select>

<div id="OtherDiv" style="display:none">
    <p><label for="poids">Poids (kg)</label><input type="text" id="poids" class="medium" disabled="disabled"/></p>
    <p><label for="prix">Prix (€)</label><input type="text" id="prix" class="medium" disabled="disabled"/></p>
    <p><label for="volume">Volume (l)</label><input type="text" id="volume" class="medium" disabled="disabled"/></p>
    <p><a href="#" class="no_label" id="sdd">Modifier les attributs…</a></p>
</div>

并创建一个javascript函数来处理您的onchange:

<script type="text/javascript">
window.onload = function(){
    showOther = function(val){
        if(val && val !='no_selection'){
            document.getElementById('OtherDiv').style.display = '';
        } else {
            document.getElementById('OtherDiv').style.display = 'none';
        }
    }
}​
</script>

JSFiddle示例

相关文章：