0

たとえば、ページの検索結果に影響を与える、さまざまなフィルターを備えたWebアプリがあるとします。

フィルタはオプションであり、select要素を使用します。最初のオプションは常に、フィルターが使用されていないことを意味し、「未使用」または「xyzの選択」などのように表示されます。

色や背景色を変更するなどして、現在使用されているフィルターと使用されていないフィルターを一目で確認できるようにする方法を探しています。

私はまだCSSを介してこれを行う方法を見つけられませんでした、多分それはjavascriptなしでは不可能ですか？ソリューションは最新のChromeでのみ機能する必要があります。

4

1 に答える 1

0

ユーザーが選択を変更するとすぐに (ページをリロードせずに) ドロップダウンの色を変更するには、JavaScript を使用する必要があります。何かのようなもの：

<script type="text/Javascript">
    function changeColor(element)
    {
        if (element.selectedIndex != 0)
            element.style.backgroundColor = "green";
        else
            element.style.backgroundColor = "red";
    }
</script>

<select onchange="changeColor(this)">

これが、ユーザーが選択を変更するとすぐに色を変更する方法です。

ページのリロード時に変更するには、サーバー側のスクリプト言語を使用する必要があります (既に使用していると思います)。したがって、<select>要素を作成するときに、その値が設定されているかどうかを確認します。PHP を使用している場合は、次のようになります。

<select name="mySelect" style="background-color:<?php echo ($_POST["mySelect"] == "select xyz" ? "red" : "green"); ?>;">
于 2012-09-27T15:18:40.470 に答える