select box Example

HTML 
<body>
    <div class="content">
      <!--    <p><b><em>Individual Style Statement Self Check</em></b></p>-->
        <div class="set">
             1.     What does XHTML stand for? <br />
            <select  id="single1"  name="select" accesskey="EXtensible HyperText Markup Language">
            <option disabled="disabled" selected="selected">Select</option>
            <option>EXtensible HyperText Markup Language</option>
            <option>EXtensible HyperText Marking Language</option>
            <option>EXtreme HyperText Markup Language</option>
            <option>EXtra Hyperlinks and Text Markup Language</option>
            </select>
            <div class="submit_enable"></div>
            <div class="nxt_enable"></div><div class="close"></div>
             <div class="pop_1"><span class="ttxt">Great! Being Comfortable with who you are will help you be a confident leader</span></div>
 <div class="pop_2"><span class="ttxt1">Think of your personal brand statement and try to fit your style to the way you want people to see you.</span></div>
        </div>
       
        <div class="set hide">
            2.     Inside which HTML element do we put the JavaScript?<br />
            <select  id="single1"  name="select" accesskey="scripting">
            <option disabled="disabled" selected="selected">Select</option>
            <option>s</option>
            <option>script</option>
            <option>javascript</option>
            <option>scripting</option>
            </select>
            <div class="submit_enable"></div>
            <div class="nxt_enable"></div><div class="close"></div>
             <div class="pop_1"><span class="ttxt">2nd ans correctr</span></div>
 <div class="pop_2"><span class="ttxt1">2nd ans incorrect</span></div>
        </div>
       
        <div class="set hide">
            3.What is the correct JavaScript syntax to write "Hello World"? <br />
            <select  id="single1"  name="select" accesskey="Hello World">
            <option disabled="disabled" selected="selected">Select</option>
            <option>document.write("Hello World")</option>
            <option>("Hello World")</option>
            <option>Hello World</option>
            <option>response.write("Hello World")</option>
            </select>
            <div class="submit_enable"></div>
            <div class="nxt_enable"></div><div class="close"></div>
             <div class="pop_1"><span class="ttxt">3rd ans correct</span></div>
 <div class="pop_2"><span class="ttxt1">3rd ans incorrect.</span></div>
        </div>
       
        <div class="set hide">
            4.Where is the correct place to insert a JavaScript? <br />
            <select  id="single1"  name="select" accesskey="The head section">
            <option disabled="disabled" selected="selected">Select</option>
            <option>The body section</option>
            <option>Both the head section and the body section are correct</option>
            <option>The head section</option>
            <option>None of the above</option>
            </select>
            <div class="submit_enable"></div>
            <!--<div class="nxt_enable"></div>--><div class="close"></div>
             <div class="pop_1"><span class="ttxt">4th ans correct</span></div>
 <div class="pop_2"><span class="ttxt1">4th ans incorrect</span></div>
        </div>
</div>

</body>



Jquery:


var Root=null;
Root = $(".content");
$("select").change(displayVals);
var oCurrSet;
var s1;
var s10;
var len=0;
function displayVals() {
 $(Root).find(".set").find(".submit_enable").show();
 }
  $(".submit_enable").live("click",function() {   
     s1 = $(Root).find(".set").find("#single1").val();
      s10 = $(Root).find(".set").find("#single1").attr('accesskey');
 if( s1 == s10){
    $(Root).find(".pop_1,.close").show();
   } else{
    $(Root).find(".pop_2,.close").show();
}
 });
 $(".close").live("click",function(){
        $(Root).find(".set").find(".nxt_enable").show();
        $(Root).find(".set").find(".pop_1,.pop_2,.close").hide();
});
 

$(".nxt_enable").live("click",function(){
     oCurrSet=$(Root).find(".set:visible");
       $(oCurrSet).next(".set").show()
        $(oCurrSet).remove(); 
});

that is very useful for create a interaction

No comments:

Post a Comment