please any one help me with this code i just want when i choose the category automatic open the gategory link <div class="hr_line"> </div> <b>Choose category:</b> <select name="search_order_u" id="search_order_u"> <option selected="selected" cat="">----</option> <option value="1" cat="movies" id="7" herf="/movies/">Movies</option> <option value="2" cat="games" id="9" herf="/games/">Games</option> </select> <div class="hr_line"> </div> Code (markup):
add to the <select the following line onchange="location.href=this.options[this.options.selectedIndex].value" and it should work.. have fun with it!
The previous post seems correct, but inline on-events may not be the best solution. But this : IMHO, a DIV with a non breaking space inside is not the best way to make a horizontal rule. <hr>, or <hr /> if you're under XHTML, is the correct way to do it. Not to mention that it's semantically correct, since "hr" in <hr> stands for "horizontal rule". I am aware that it may be hard to style in old IE, but suck it up for good cause.
i added the code but doesn't work i don't know where the problem <div class="hr_line"> </div> <b>Choose category:</b> <select name="search_order_u" id="search_order_u"> <option selected="selected" cat="">----</option> <option onchange="location.href=this.options[this.options.selectedIndex].value" value="1" cat="movies" id="7" herf="/movies/">Movies</option> <option onchange="location.href=this.options[this.options.selectedIndex].value" value="2" cat="games" id="9" herf="/games/">Games</option> </select> Code (markup):
or add onchange="location.href=this.value" that should also work if i may believe other users on other places on the net oh and don't add it to the option my friend add it to the <select
ASSUMING it's semantically correct -- since a HR says "this section ends and a new one starts" -- even HTML 5 which I usually piss on from orbit says that. REALLY this code is a laundry list of how not to write a form element... with the bold tag doing label's job, multiple DIV likely for nothing, etc, etc... Much less you can't onchange OPTION, you can only onchange the SELECT! It does NOT go on OPTION. Generally speaking the only attributes OPTION should ever have is SELECTED or VALUE, and value is generally speaking redundant in a lot of cases. Much less there's no such thing as a CAT attribute on a OPTION... ID's can't start with numbers, there's no such thing as a herf attribute, OPTION can't have HREF's... This would work... kind-of <div class="selectArea"> <label for="searchOrder">Choose category:</b> <select name="search_order_u" id="searchOrder" onchange="location.href=this.options[this.selectedIndex].value" > <option selected="selected">----</option> <option value="/movies/">Movies</option> <option value="/games/">Games</option> </select> </div> Code (markup): BUT, if you select ---- it's gonna try to go to ---, so the script needs to be more complete. NOT that this is actually a job for a SELECT since you then have no scripting off fallbacks. This is a job for a numbered heading tag and a list; with CSS and scripting assistance if desired. I mean, given what this does there is no reason for it to be using form elements -- I half suspect you don't even have a form.
thank u about that great help for my friends ericbruggema and wiiker and deathshadow the last code from deathshadow it's the right code and working thank u for all my friends here
Well, notice I was saying it's NOT the proper markup, or even javascript's job to do what you are trying to do. All you've really got here is a dropdown menu, NOT a select. It is NOT select's job to send you to another page -- that's an ANCHOR's job. An anchor can do this WITHOUT scripting... Which is why I'd have this for markup: <div class="chooseCategory"> <h2>Choose category</h2> <ul> <li><a href="/movies/">Movies</a></li> <li><a href="/games/">Games</a></li> </ul> </div> Code (markup): and then turn it into a normal CSS dropdown instead of a SELECT. SELECT is a form element -- it belongs inside a form... and it should NOT be used as a dropdown to select a HTML destination. Something like: .chooseCategory { position:relative; overflow:hidden; width:12em; height:1.5em; text-align:center; border:0.1em solid #000; } .chooseCategory:hover { overflow:visible; } .chooseCategory h2 { font:normal 100%/150% arial,helvetica,sans-serif; background:#FFF; } .chooseCategory h2:before { content:"\0021D3"; float:right; width:1.2em; background:#DDD; border-left:1px solid #000; } .chooseCategory ul { position:absolute; overflow:auto; top:1.5em; left:50%; width:12em; max-height:7.5em; /* 5 times line-height */ margin-left:-6.1em; /* 1/2 width + border width to center it */ font:normal 100%/150% arial,helvetica,sans-serif; background:#FFF; border:0.1em solid #000; } .chooseCategory li { display:inline; /* to prevent IE7 staircase bugs */ } .chooseCategory a { display:block; } .chooseCategory a:active, .chooseCategory a:focus, .chooseCategory a:hover { background:#EEE; } Code (markup): Which I put a live copy of up here: http://www.cutcodedown.com/for_others/bersy/template.html With my usual wide-open directory for easy access to the bits and pieces. http://www.cutcodedown.com/for_others/bersy/ I duplicated the 'games' one a few times so we could see that the scroller on the LIST (since it seems to be a list of choices, that's the semantically correct tag set). It's a good deal of CSS I'll admit -- but unlike a select you have full control over it's styling, uses semantically correct tags, functions when javascript is missing, and even functions CSS OFF, and your scripted version would have needed more code so you could filter out the value="-----" anyways. This also has the added bonus that it gives search engines a meaningful way to spider the site. That's the "proper" way of doing that -- save the "stupid javascript tricks" for when you need them.
wow it's another great code i just put it and working that's really great work u should come to egypt to teach me html u are genius i send to u my site to check it