javascript - 根据选项类别而不是值显示不同的内容

Question

在网页中我有多种形式，如下所示:

<form action="" method="post">
	
	<input type="text">

	<select name="a">
		<option class="hide-all">Choose</option>
		<option class="show-link">Show link</option>
		<option class="show-submit">1</option>
		<option class="show-submit">2</option>
	</select>

	<input class="hidden show-if-class-show-submit-selected" type="submit">Submit form</form>
	<a class="hidden show-if-class-show-link-selected" href="page.html">Link</a>

</form>

我如何显示仅基于选项类而不是值 optoin 的提交按钮或链接，我必须仅使用类而不是 ids....:)。谢谢!

Answer 1

检查 select 元素的 change 事件。 (还添加一个类来标识所涉及的元素，以便您可以在更改选项后再次隐藏它们)

$(function() {

  $('select').on('change', function() {
    var option = $(this).find(':selected'),
      relatedClass = option.attr('class');

    $(this).closest('form')
      .find('.select-target')
      .addClass('hidden')
      .filter('.' + relatedClass)
      .removeClass('hidden');
  });

});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<form action="" method="post">

  <input type="text" />

  <select name="a">
    <option class="hide-all">Choose</option>
    <option class="show-link">Show link</option>
    <option class="show-submit">1</option>
    <option class="show-submit">2</option>
  </select>

  <input class="hidden show-submit select-target" type="submit" value="Submit form">
  <a class="hidden show-link select-target" href="page.html">Link</a>

</form>