www.webdeveloper.com
Results 1 to 6 of 6

Thread: If Option Selected { do something }

  1. #1
    Join Date
    Mar 2014
    Posts
    3

    If Option Selected { do something }

    ok i have this:


    <p id="q1Alt_a" class="alternativa">a) Their (linha 02):
    <select id="questao1_a">
    <option selected="selected" value="0">Selecione uma opcao</option>
    <option value="1">to know what other people are like</option>
    <option value="2">the reader / any reader</option>
    <option value="3">a person (meaning all the people)</option>
    <option value="4">prospective employees</option>
    <option value="5">Jennifer Goelbeck/Goelbeck</option>
    </select> <img class="simbolo" id="q1SimbCerto_a" src="correto.png" /><img class="simbolo" id="q1SimbErrado_a" src="errado.png" /> </p>


    and i need an function that does something like " if option 1 selected then something happens (i got the rest covered)"
    i just dont know how to do the if option x selected.

    i tried lots of things but none work


    function selecionaHigh(){


    alert("test");



    if(document.getElementById('questao1_e').selectedIndex == 2){
    alert("testeeeeee");


    }

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    You should use the onChange attribute, which calls he function whenever there is a change (i.e. the user selects an option) along with the keyword "this" (represented in the JavaScript function by the parameter variable x).

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type = "text/javascript">						
    			function func(x) {
    				alert(x.value);
    				switch(x.value) {
    					case "0":
    						alert("selected 0");
    						break;
    					case "1":
    						alert("selected 1");
    						break;
    					case "2":
    						alert("selected 2");
    						break;
    					case "3":
    						alert("selected 3");
    						break;
    					case "4":
    						alert("selected 4");
    						break;
    					default: // called if the value is none of the above
    						alert("selected 5");
    						break;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<select id="questao1_a" onChange = "func(this)" >
    			<option selected="selected" value="0">Selecione uma opcao</option>
    			<option value="1">to know what other people are like</option>
    			<option value="2">the reader / any reader</option>
    			<option value="3">a person (meaning all the people)</option>
    			<option value="4">prospective employees</option>
    			<option value="5">Jennifer Goelbeck/Goelbeck</option>
    		</select>
    	</body>
    </html>

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,346
    We do have a JavaScript Frameworks forum for things like JQuery questions.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Mar 2014
    Posts
    3
    Quote Originally Posted by Error404 View Post
    You should use the onChange attribute, which calls he function whenever there is a change (i.e. the user selects an option) along with the keyword "this" (represented in the JavaScript function by the parameter variable x).

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type = "text/javascript">						
    			function func(x) {
    				alert(x.value);
    				switch(x.value) {
    					case "0":
    						alert("selected 0");
    						break;
    					case "1":
    						alert("selected 1");
    						break;
    					case "2":
    						alert("selected 2");
    						break;
    					case "3":
    						alert("selected 3");
    						break;
    					case "4":
    						alert("selected 4");
    						break;
    					default: // called if the value is none of the above
    						alert("selected 5");
    						break;
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<select id="questao1_a" onChange = "func(this)" >
    			<option selected="selected" value="0">Selecione uma opcao</option>
    			<option value="1">to know what other people are like</option>
    			<option value="2">the reader / any reader</option>
    			<option value="3">a person (meaning all the people)</option>
    			<option value="4">prospective employees</option>
    			<option value="5">Jennifer Goelbeck/Goelbeck</option>
    		</select>
    	</body>
    </html>
    -----------------------------------------------------------------------------------------------------------------------------------------------------------------------

    thx that helped a lot!

    now i have another problem (damn!)

    thing is i can't use id, because i need to highlight more than one <p> or <colspan>
    ok now, i have two questions that would help a lot if someone answer me! (REALLY)

    1) may i add a class to <colspan> ? like:


    .classHi{
    text-decoration:underline;
    }

    <colspan class="classHi"> text text text </colspan>

    2) i need to add 1 class to another class.
    i had that done with id, like i was getting element by id and adding a class.
    but when i try to do the same using getelementbyclass won't work.
    here's the code:



    function selecionaHigh(){


    alert("function worked");

    if(document.getElementById('questao1_a').value == "5") {

    alert("test inside if");


    // document.getElementsByClassName('classHi').className += ' HighAsuka'; // i need something like this to add a class to another class.

    aux = document.getElementsByClassName('classHi')
    aux.classHi += ' HighAsuka';



    alert("test");



    }


    document.getElementsByClassName('test');



    }

  5. #5
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    865
    It doesn't appear you are using jQuery at all, so I'll first mention that you need to include the jQuery library on your page if you plan on using jQuery with your solution (which would make things very simple).

    Moving on, if you want to select all of the elements by a class and then append a new class to the existing one:
    Code:
      $(".classHi").addClass("HighAsuka");
    Again, remember you need to include the jQuery library on your page. Also I'll note I haven't actually looked at what your code does or how you intend for the entire thing to work, so my code only solves the 2nd problem you posted and might not solve exactly what you want.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  6. #6
    Join Date
    Mar 2014
    Posts
    3
    Sup3rkirby, i used your method $(".classHi").addClass("HighAsuka"); and that worked!

    thank you so much!

    about the jquery stuff i really dont know what i'm doing (lol)
    i doing all my work with javascript (i guess)

    i need to study jquery, i heard it simplifies the javascript code.

    i don't even know how to include the libraries.

    but again, thx for the help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles