CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3387522
user3387522

Reputation: 127

How would i change a <div> border colour when a drop down box is selected

Hi I am trying to get a HTML <div> to change its border colour when I select one of the drop down boxes in side it.

I have tried something simple like:

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

The html is: 

  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>";

but when the mouse has left the div the border colour is no longer showing and I understand why just wondering whats the best possible way to do this.

I have JavaScript linked to these boxes I don't know if you could add something into this JavaScript to achieve the same results.

The JavaScript I have got : 

 $(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>

any help would be much appreciated I am open to all suggestions such as jquery

Upvotes: 1

Views: 1085

Answers (2)

mbcrute
mbcrute

Reputation: 1127

You need to handle the drop down's change event and in the event handler, apply your CSS class based on the selected value. Here is a JSFiddle with an example: http://jsfiddle.net/6AUg2/2/

Upvotes: 0

RGS
RGS

Reputation: 5211

Html:

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

Jquery:

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

Demo:

http://jsfiddle.net/K7YmM/

Upvotes: 1

Related Questions