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>

そのすぐ下には、値が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>

onchangeそして、あなたの：を処理するjavascript関数を作成します

<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 に答える