1

2 つの選択オプション フィールドがあります。

<div style="float:left; width:7%">
<label>Type</label>             
<select name="ostatus" id="ostatus" class="input-small">
<option value="Actual">Actual</option>
<option value="Ghost">Ghost</option>
</select>


<div style="float:left; width:7%">
<label>Upgrade</label>              
<select name="oupg" id="oupg" class="input-small">
<option value="Exp" >Exp</option>
<option value="Post" >Post</option>
<option value="Upgrade" >Upg</option>
<option value="Retail" >Retail</option>
<option value="Prepaid" >Prepaid</option>
</select>

タイプ選択でゴーストが選択されている場合、アップグレードオプションの下にオプションの小売りとプリペイドを非表示にしたいと思います. どうすればいいですか？アップグレードのために div コンテナー全体を非表示にすることはできますが、最後の 2 つのオプションのみを非表示にしたいと考えています。いくつかの支援をいただければ幸いです。

4

3 に答える 3

2

jqueryを使用できます

$(document).ready(function(){
    $('#ostatus').on('change',function() {
        if($(this).val()== 'Ghost'){
          $('#oupg') .find ("option[value=Retail]").hide();
           $('#oupg') .find ("option[value=Prepaid]").hide();
        }
        else{
            $('#oupg') .find ("option[value=Retail]").show();
           $('#oupg') .find ("option[value=Prepaid]").show();
        }
    });
});
于 2013-01-30T04:45:39.277 に答える
2

Javascript とdisplay:noneCSS スタイルを使用すると、これを実現できます。

<head>
    <script type="text/javascript">
        function hideOpt() {
            var type = document.getElementById("ostatus");
            var upgrade = document.getElementById("oupg");
            if (type.options[type.selectedIndex].value == 'Ghost') {
                upgrade.options[3].style.display = 'none';
                upgrade.options[4].style.display = 'none';
                // IE exception
                upgrade.options[3].disabled = true;
                upgrade.options[4].disabled = true;
            } else {
                upgrade.options[3].style.display = 'block';
                upgrade.options[4].style.display = 'block';
                // IE exception
                upgrade.options[3].disabled = false;
                upgrade.options[4].disabled = false;
            }
        }
    </script>
</head>

<label>Type</label>             
<select name="ostatus" id="ostatus" onchange="return hideOpt();" class="input-small">
    <option value="Actual">Actual</option>
    <option value="Ghost">Ghost</option>
</select>


<label>Upgrade</label>              
<select name="oupg" id="oupg" class="input-small">
    <option value="Exp" >Exp</option>
    <option value="Post" >Post</option>
    <option value="Upgrade" >Upg</option>
    <option value="Retail" >Retail</option>
    <option value="Prepaid" >Prepaid</option>
</select>

編集：

else「実際」が選択されたときにオプションを再度表示するステートメントを追加しました。

于 2013-01-30T04:26:49.867 に答える
0

すべてのブラウザーで要素を非表示にすることはできませんoptionが、無効にすることはできます。

document.querySelector("#oupg option[value=Retail]").disabled = true;
document.querySelector("#oupg option[value=Prepaid]").disabled = true;

これは IE8 以降で動作します。

IE7 以下のサポートが必要な場合は、次のようにします。

var opts = document.getElementById("oupg").options;

opts[opts.length - 2].disabled = true;
opts[opts.length - 1].disabled = true;
于 2013-01-30T04:17:32.950 に答える