0

基本上我有一个选择：

<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…&lt;/a></p>
</div>

我已经尝试了我发现的以前的 JQuery 和 CSS 示例，但似乎没有一个对我有用，谁能给我一个很好的例子，因为我有点卡住了，谢谢。

4

4 回答 4

3

干得好。

您需要将更改事件绑定到您的选择框，并在更改时使用: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…&lt;/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>
于 2012-09-04T10:02:53.037 回答
1 
<select id="SelectExample" onChange="$('#OtherDiv').toggle($(this).val() != 'no_selection');">
于 2012-09-04T09:58:30.803 回答
0

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

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

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

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

于 2012-09-04T09:58:59.577 回答
0

改变显示：

<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…&lt;/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 示例

于 2012-09-04T10:02:03.227 回答