get the id of the previous field in javascript

<td>
            <select name="ad_category" id = "ad_category" onchange="select_sub_cat(this.value)" >
                <option value="#"></option>
                <option value="jobs" id="jobs">Jobs</option>
                <option value="sales" id="for_sale">For sale</option>
                <option value="services" id="services">Services</option>
                <option value="real_estate" id="real_e">Real estate/housing</option>    
            </select>
        <span id="cat_help"><a href="">Help</a></span>
        </td>

IN the above code , in <a href=""> I want to pass the id or any information of the option selected , so that clicking on 开发者_运维百科help will show only the help for the particular option . But my question is is it possible to get the id of the option selected ?

---

You should be using a button or some other element that doesn't suggest navigation. An inline handler might be:

<... onclick="alert(document.getElementById('ad_category').value);" ...>

More generally, once you have a reference to the select element:

var select = document.getElementById('ad_category');

you can access various properties defined by the HTMLSelectElement interface:

select.selectedIndex // index of selected option
select.options  // collection of all options
select.options[select.selectedIndex] // the selected option (if there is one)

and so on.

Edit

You might also want to implement a more generic help system based on class values. Give your form controls a class depending on the help that should be shown. Then the help button can just get the previous form control, grab its class and show it.

e.g.

<style type="text/css">
.helpLink {
  color: #CC00FF;
  cursor: pointer;
}
</style>

<script type="text/javascript">

var showHelp = (function() {

  var help = {
    firstName: 'Enter your first name',
    lastName: 'Enter your last name'
  }

  return function (el) {

    var helpType;
    var node;

    do {
      el = el.previousSibling;
    } while (el && el.nodeType != 1)

    if (el) {
      helpType = el.className.match(/(^|\s)help-\w+/);

      if (helpType) {
        helpType = helpType[0].replace('help-','');

        // Show help
        alert(help[helpType]);
      }
    }
  }
}());
</script>

<form name="form0" action="">
  first name: <input type="text" class="help-firstName" name="firstName">
  <span class="helpLink" onclick="showHelp(this)">?</span>
  <br>
  last name: <input type="text" class="help-lastName" name="lastName">
  <span class="helpLink" onclick="showHelp(this)">?</span>
  <br>
</form>

The above is just a trivial demo.

---

Yes, you can get the selected option's id:

//Place in event handler
var element = document.getElementById("ad_category");
element.options[element.selectedIndex].id

Related SO post.

---

If you are using jQuery, you can use the change() function on the selector, to let you know when the selector changes, and capture the ID of the selected item.

Once you have that, you can use jQuery's attr on the anchor to change the href.

---

Yes it is and you even have several options how to get the job done.

Since the select has an ID, you can get the value like this:

var select = document.getElementByID('ad_category'),
    value  = select.value;

alert(value);

But also, since the select is a sibling to the parent of the a element, you can also find it like this:

// This example is assuming quite a lot, so it's not really the best option and is
// provided merely for entertainment or trivia.
// Namely, this code requires that it is run in context of the a-element 
// (means: 'this' refers to the 'a' -element)
// and also that the markup is exactly as in the example because of traversal.
var select = this.parentNode.previousElementSibling,
    value  = select.value;

alert(value);