drop down menu button

Question

I have a drop down menu and it will forward to the link when user clicks it Please click here to view I dont want any button just when user select category it will forward it to them. I want to remove the button when user want they click the menu and when select it will forward to the domain. Please guide me. Thanks...

The button code is

<FORM name="mapform" method="POST">
<SELECT name="jump" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.mydomain.com/posting.php?mode=post&f=1">Ask a Question</option>
<OPTION value="http://www.mydomain.com/posting.php?mode=post&f=4">Vehicle for Sale</option>
<OPTION value="http://www.mydomain.com/posting.php?mode=post&f=8">Housing for Rent</option>
</SELECT>
<INPUT type=button onClick= "location = '' + document.mapform.jump.options[ document.mapform.jump.selectedIndex ].value;" value="Place an Ad!">
</FORM>

Additional Help :) if possible can you tell me how to make this button look good like nice themes...

score 1 · Accepted Answer · answered Dec 12 '12 at 10:04

Move the onclick code to the dropdown's onchange event:

<SELECT name="jump" size="1" onchange="window.location = this.value;">

Although, I suggest creating a function instead of throwing all of the code in the inline event because you will need to check if the Select the Category option is selected and therefore don't redirect.

<script>
function changeCategory(value)
{
    if(value != "")
    {
        window.location = value;
    }
}
</script>

<SELECT name="jump" size="1" onchange="changeCategory(this.value)">

score 1 · Answer 2 · answered Dec 12 '12 at 10:09

Try this
HTML

<SELECT name="jump" id="jump" size="1">
<OPTION value="" SELECTED>Select the Category</option>
<OPTION value="http://www.mydomain.com/posting.php?mode=post&f=1">Ask a Question</option>
<OPTION value="http://www.mydomain.com/posting.php?mode=post&f=4">Vehicle for Sale</option>
<OPTION value="http://www.mydomain.com/posting.php?mode=post&f=8">Housing for Rent</option>
</SELECT>

JQUERY SCRIPT

<script>
    $(function(){

      $('#jump').bind('change', function () {
          var url = $(this).val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

score 1 · Answer 3 · edited Dec 27 '12 at 15:51

You have to trigger it while onChange of that drop-down.

In onChange of that drop-down, you can call a Javascript function and in that function you can redirect it.

OR

You can create an id for that <select> and create onchange event:

<SELECT name="jump" size="1" id="category">
<script type="text/javascript">
   $(document).ready(function() {
      $("#category").onchange(function() {
        // do redirect here  ....................
      });
   });
</script>

drop down menu button

3 Answers3