Question

基本上我有一个选择：

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

如果价值为no_selection

，那就是我想隐藏的div

<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示例，但似乎没有一个对我有用，任何人都可以给我一个很好的例子，因为我有点卡住了，谢谢。

Answer 1

你走了。

您需要向选择框bind发送change个事件，并在更改时使用:selected检索所选选项的值，并根据该值显示或隐藏。 jQuery toggle方法很适合。

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

Answer 2

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

Answer 3

听起来以下某些内容对你有用吗？

$("#SelectExample").change(
 function()
 {
  var that = $(this);

  if(that.val() == "no_selection"){
   $("#OtherDiv").show();
  }else{
   $("#OtherDiv").hide();
  }
 }
);

只是一个简单的OnChange事件，然后检查字段的值 - 说，你甚至不需要JQ这个..

Answer 4

更改显示：

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

并创建一个处理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 Example

隐藏/显示以下选项，具体取决于是否选择了选项

4 个答案: