javascript - 选择下拉框时如何更改 <div> 边框颜色

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

HTML:

<div id="dv">
    <select id="ddl">
        <option>Select</option>
        <option>One</option>
        <option>Two</option>
    </select>   
</div>

J查询:

 $( "#ddl" ).change(function() {
                alert($(this).val());
    $('#dv').addClass('active');                 
                });

演示:

http://jsfiddle.net/K7YmM/