Question

您好我正在尝试使用HTML <div>来更改其边框颜色，当我选择其中一个下拉框时。

我尝试了一些简单的事情：

<style>
#select_Academic:hover{border:1px solid red;}
#select_Academic:focus{border:1px solid red;}
#select_Academic:active{border:1px solid red;}
</style>

html是：

  echo "<div id=\"Options\">";

 include "select.class.php"; 
echo "<form id=\"select_Academic\">";
echo "<div class=\"Select_Option\">"; 
echo "Choose a subject:";
echo "</div>";
echo "<select style=\"width:200px; margin-left:10px;\" id=\"category\" name=\"cat\" >";
echo $opt->ShowCategory();
echo "</select>";
echo "<br />";
echo "<br />";

echo "<div class=\"Select_Option\">";
echo "Choose a section:";
echo "</div>";              
echo "<select style=\"width:200px; margin-left:10px;\"id=\"type\">";
echo "<option value=\"%\">";
echo "Section";
echo "</option>";
echo "</select>";
echo "<br />";
echo "<br />";

echo "<div class=\"Select_Option\">";
echo "Choose a principle:";
echo "</div>";
echo "<select style=\"width:200px; margin-left:10px;\"id=\"principle\">";
echo "<option value=\"%\">";
echo "Principle";
echo "</option>";
echo "</select>";
echo "<br />";
echo "<br />";
echo "<input style=\"margin-left:10px;\" type=\"submit\" value=\"Search\"/>";
echo "</form>";
echo "</div>";

但是当鼠标离开div时，边框颜色不再显示，我理解为什么只是想知道最好的方法是什么。

我有JavaScript链接到这些框我不知道你是否可以在这个JavaScript中添加一些东西以获得相同的结果。

我得到的JavaScript：

 $(document).ready(function()
        {

                $("select#type").attr("disabled","disabled");
                $("select#category").change(function()
                {
                    var id = $("select#category option:selected").attr('value');
                    $("select#type").attr("disabled","disabled");
                    $("select#type").html("<option>wait...</option>");
                    $.post("select_type.php", {id:id}, function(data)
                    {
                        $("select#type").removeAttr("disabled");
                        $("select#type").html(data);
                    });
                });

            $("select#principle").attr("disabled","disabled");
            $("select#type").change(function(){
                var id = $("select#type option:selected").attr('value');
                $("select#principle").attr("disabled","disabled");
                $("select#principle").html("<option>wait...</option>");
                $.post("select_principle.php", {id:id}, function(data){
                    $("select#principle").removeAttr("disabled");
                    $("select#principle").html(data);
                });
            });

            $("select#career").attr("disabled","disabled");
            $("select#jobrole").change(function(){
                var id = $("select#jobrole option:selected").attr('value');
                $("select#career").attr("disabled","disabled");
                $("select#career").html("<option>wait...</option>");
                $.post("select_career.php", {id:id}, function(data){
                    $("select#career").removeAttr("disabled");
                    $("select#career").html(data);
                });
            });

            $("form#select_Academic").submit(function()
            {
                var cat = $("select#category option:selected").attr('value');
                var type = $("select#type option:selected").attr('value');
                var princ = $("select#principle option:selected").attr('value');
                $txt = cat + "#" + type + "#" + princ;
                var id = $("select#type option:selected").attr('value');
                $.post("get_results.php", {comboboxselections:$txt}, function(data){
                    $("#ResultList").html(''+data);
                });
                if(cat>0 && type>0 && princ>0)
                {
                }
                else
                {
                    $("#ResultList").html("you must choose three options!");
                }
                return false;
            });

            $("form#Select_Job").submit(function()
            {
                var job = $("select#jobrole option:selected").attr('value');
                var car = $("select#career option:selected").attr('value');
                $txt1 = job + "#" + car;
                var id = $("select#career option:selected").attr('value');
                $.post("get_jobresults.php", {comboboxselections1:$txt1}, function(data){
                    $("#ResultList").html(''+data);
                    });         
                if(job>0 && car>0)
                {
                }
                else
                {
                    $("#ResultList").html("you must choose two options!");
                }
                return false;
            });
        });
        </script>

任何帮助都将非常感谢我对所有建议开放，例如jquery

Answer 1

您需要处理下拉列表的change事件，并在事件处理程序中根据所选值应用CSS类。这是一个带有示例的JSFiddle：http://jsfiddle.net/6AUg2/2/

当选择下拉框时，如何更改<div>边框颜色</div>

1 个答案: