Question

<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>

在上面的代码中，<a href="">我希望传递所选选项的ID或任何信息，以便点击帮助时只会显示特定选项的帮助。但我的问题是，是否可以选择选项的ID？

Answer 1

您应该使用按钮或其他不建议导航的元素。内联处理程序可能是：

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

更一般地说，一旦你引用了select元素：

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

您可以访问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)

等等。

修改

您可能还希望基于类值实现更通用的帮助系统。根据应显示的帮助，为表单控件提供一个类。然后帮助按钮可以获取以前的表单控件，抓取它的类并显示它。

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>

以上只是一个简单的演示。

Answer 2

是的，您可以获得所选选项的ID：

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

Related SO post

Answer 3

如果您使用的是jQuery，则可以使用选择器上的change()函数，让您知道选择器何时更改，并捕获所选项目的ID。

完成后，您可以在锚点上使用jQuery的attr来更改href。

Answer 4

是的，您甚至可以选择如何完成工作。

由于select有ID，您可以获得如下值：

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

alert(value);

但是，由于select是a元素的父级的兄弟，你也可以这样找到：

// 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);

在javascript中获取前一个字段的id

4 个答案:

修改