根据选项类显示不同的内容，而不是值

Question

在网页中我有各种各样的形式：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

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

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

Answer 2

＆＃13;

＆＃13;

document.querySelector('select').addEventListener('change',function(){
    var selected = this.options[this.selectedIndex];
    document.querySelector('.show-if-class-show-link-selected').style.display = selected.className === 'show-link' ? '' : 'none';
    document.querySelector('.show-if-class-show-submit-selected').style.display = selected.className === 'show-submit' ? '' : 'none';
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;